How Flexbox CSS Properties Works ?
First of all, flexbox is designed for layout (row and column) in one dimension. A new layout mode that provides an easy and clean way to arrange items within a container.
Here are some examples on how I use it :
Display
display: flex | flex-inline;
In a container, when
display: flex
is used, the container behaves as a block element and in
display: inline-flex
it behaves as an inline-block.
Flex Direction
flex-direction: row | row-reverse | column | column-reverse;
Flex Wrap
flex-wrap: nowrap | wrap | wrap-reverse;
Flex Flow
flex-flow: {flex-direction} {flex-wrap};
The flex-flow property is a shorthand property, combination of flex-direction and the flex-wrap properties.
Justify Content
justify-content: flex-start | flex-end | center | space-between | space-round;
This property controls the items of the container, horizontally.
Align Items
align-items: flex-start | flex-end | center | stretch | baseline;
This property is similar to justify-content and it aligns the items within the container.
Align Content
align-content: flex-start | flex-end | center | stretch | space-between | space-around;
Align Self
align-self: flex-start | flex-end | center | stretch | baseline;
This property is similar to align-items but the effect is applied individually to each item inside the container.
Flex Grow
flex-grow: 1;
The flex-grow property is only specified as a single number or decimal number (0–9). Negative number is invalid.
Flex Shrink
flex-shrink: 1;
The flex-shrink property is only specified as a single number or decimal number (0 - 9). Negative number is invalid. Flex-shrink works only when the width of item is wider than the container.
Hope you’ve learned something about flexbox, if you reached this point of the article.
If you want to know more about it. I highly recommend you check out the following articles.
- A Complete Guide to Flexbox — CSS-Tricks by Chris Coyier
- Flexbox — Codrops by Sara Soueidan