Skip to main content

Felxbox css

flexbox-css

The Flex Container Properties - Understanding Flexbox: Everything you need to know

“Baseline” really sounds fancy.

“Baseline” really sounds fancy.

The result appears to look just like flex-start but it is subtly different.

What the heck is “baseline”?

The image below should help.

Notice how all the flex-items are aligned to have their content seat on the “baseline”?

6. Align-content

While discussing the wrap property, do you remember what happened when you added more flex-items to the flex-container?

You got a multi-line flex container.

The align-content property is used on multi-line flex-containers.

It takes the same values as align-items apart from baseline.

By definition, it controls how the flex-items are aligned in a multi-line flex container.

Just like align-items, the default value is also stretch

These are values you should now be familiar with. So, here’s how they affect a multi-line flex-container with 10 flex-items.

(i) Stretch

With stretch, the flex items are “stretched” to fit the available space along the cross-axis.

The spacing you see between the flex items below is owing to the margin set on the items.

(ii) Flex-start

You’ve seen the flex-start value before.

This time it aligns the items in the multi-line container to the start of the cross-axis.

Remember the default cross axis is from top-to-down.

Thus, the flex items are aligned to the top of the flex container.

(iii) Flex-end

The flex-end value aligns the flex items to the end of the cross-axis.

(iv) Center

Like you may have guessed, center aligns the flex-items to the center of the cross-axis.

That’s the last of the flex-container properties.

You now understand how to use the various flex-container properties. You’ll use these to work through the practical sections coming up in the lessons that come.

Source

≡

Comments

Post a Comment

Share your thoughts!

Popular posts from this blog

These Are The Bash Shell Commands That Stand Between Me And Insanity

These Are The Bash Shell Commands That Stand Between Me And Insanity These Are The Bash Shell Commands That Stand Between Me And Insanity I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack Overflow and modify… These Are The Bash Shell Commands That Stand Between Me And Insanity I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack Overflow and modify them to suit my needs. All of these commands are for Ubuntu/WSL … some may work in other scenarios but I can’t guarantee it. ...
Post a Comment
Read more
Deploy-React-App-To-Heroku-Using-Postgres Deploy React App To Heroku Using Postgres & Express Heroku is an web application that makes deploying applications easy for a beginner. Deploy React App To Heroku Using Postgres & Express Heroku is an web application that makes deploying applications easy for a beginner. Before you begin deploying, make sure to remove any console.log ’s or debugger ’s in any production code. You can search your entire project folder if you are using them anywhere. You will set up Heroku to run on a production, not development, version of your application. When a Node.js application like yours is pushed up to Heroku, it is identified as a Node.js application because of the package.json file. It runs npm install automatically. Then, if there is a heroku-postbui...
Post a Comment
Read more

Data Structures Resources

Data Structures & Algorithms Resource List Part 1 Data Structures & Algorithms Resource List Part 1 Guess the author of the following quotes: Data Structures & Algorithms Resource List Part 1 Guess the author of the following quotes: Talk is cheap. Show me the code. Software is like sex: it’s better when it’s free. Microsoft isn’t evil, they just make really crappy operating systems. Update: Here’s some more: ...
Post a Comment
Read more