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

links

links Absolutely Everything You Could Need To Know About How JavaScript TOC & Condensed Links **** **** **** **** **** 1 2 3 4 5 leonardomso/33-js-concepts *This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a…*github.com Call stack - MDN Web Docs Glossary: Definitions of Web-related terms MDN *A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its…*developer.mozilla.org Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more *Web developers or Front end engineers, as that’s what we like to be called, nowadays do everything right from acting as…*medium.com Understanding the JavaScript call stack *The JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter…*medium.freecodecamp.org Javascript: What Is The Execution Context? ...
Post a Comment
Read more

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms.

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. “JavaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you… Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Photo by Florian Olivo on  Unsplash “ J avaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you do.” ― Dmitry Baranowski Here’s another (much) more simple article I wrote on the subject: Closures In Javascript Answer A closure is a function defined...
Post a Comment
Read more

React Tricks

REACT-TIPS React Tips Replace Redux with React Query As our application gets larger it becomes harder to manage state across our components, we may reach for a state management library like Redux. If our application relies on data that we get from an API, we often use Redux to fetch that server state and then update our application state. This can be a challenging process; not only do you have to fetch data, but you also need to handle the different states, depending on whether you have the data or are in a loading or error state. Instead of using Redux to manage data you get from a server, use a library like React Query. React Query not only gives you greater control over making HTTP requests in your React apps through helpful hooks and the ability to easily refetch data, but it also enables us to seamlessly manage state across our app components, of...
1 comment
Read more