Flexbox is not a single property its complete module which comes with the number of features and here we have a complete guide for CSS flex
Before going into detail I just want to answer why we should use flexbox layout instead of a traditional way of doing layout webpage using display properties, float properties, positional properties
Advantages of using flexbox
- Flexbox Equally distribute height and width for the item, even though items are added dynamically, Don’t need to care about CSS properties
- easily reverse the structure of items
- easily grow and shrink the width of the item as per dynamic width of the container
- easily control the direction of the elements like vertical or horizontal based on a single property
- change the order of any element
- 96% of the browser having support for flexbox
Layout for flexbox
we should know how flexbox works, please refer below diagram

flexbox is divided into two-axis main axis and cross axis.
In normal layout when we are using display inline or inline-block. it goes from left to right only
- main-axis: This is the default axis where items laid out by default. it’s not necessarily horizontal always, it can be vertical also depending upon flex-direction
- Main start/ Main-end: Items will be placed from main-start to main-end
- Main size: width or height of the container depending upon flex-direction
- Cross-axis: Cross axis is perpendicular to the main axis.
- Cross-start/Cross-end: Items will be laid out started from cross-start to cross-end
- Cross-size: The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.
Before starting with the flexbox properties we should understand which properties meant for flex container and flex items
Flexbox container properties
- display
- flex-direction
- flex-wrap
- justify-contents
- align-items
- align-contents
Flexbox item properties
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Flexbox container properties
display
As we know display property have the number of value like inline, block, inline-block, etc. But if we are giving value as flex then we are turning on flexbox context
.container { display: flex }
flex-direction
flex-direction decides that how items will be laid out on main-axis horizontally or vertically
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;


Above are the possible values for flex-direction property
- row: row is by default value for flex-direction where item will be placed from left to right
- row-reverse: items will be placed from right to left
- column: Items will be placed vertically top to bottom
- column-reverse: Items will be placed bottom to top
- initial: It set’s value to the default
- inherit: inherit the value from the parent
flex-wrap:
flex-wrap controls the behavior that items will move into the next line if the container width is less than the total item width.
flex-wrap: nowrap | wrap | wrap-reverse;
Default value: nowrap

- no-wrap: fit into the one line by adjusting the width of the item
- wrap: item will be laid down to next line from top to bottom
- wrap-reverse: item will be laid down to next line from bottom to top
flex-flow
flex-flow is shorthand for flex-direction and flex-wrap
flex-flow: <flex-direction> | <flex-wrap>
Default value: row no-wrap
let’s see some examples

Above we saw an example of flex-flow where flex-direction is row. You can do same for flex-direction column just consider above thing vertically
justify-content
justify-content is used to align items on the main-axis. Its container property so it will align all child items to the particular position like to the center, start or end or giving space between them.
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
Default value: flex-start

- flex-start – Align items to the start of the container depending upon flex-direction
for eg.
.container { flex-direction: row-reverse justify-content: flex-start; }
As you can see above flex-start started from the right side, not from writing mode direction
- center: Align items to the center
- flex-end: Align items to the end of the container as per flex-direction
- space-around: Gives space around the items by adjusting width
- space-between: gives space between the items not at the start and end of the container
- space-evenly: gives an equal amount of space around the item
- start: Align items to the start of the container as per writing mode direction
- end: Align items to the end of the container as per writing mode direction
align-items
align-items property is used to align items in respective of cross-axis like we have justify-content for main-axis
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
Default value: stretch

- stretch: occupies the full height of the container if height to the items not given externally
- flex-start: align-items to the start of the container in consideration with cross-axis
- center: align-items to the center in consideration with cross-axis
- flex-end: align-items to the end in consideration with cross-axis
- baseline: align-items as per baseline of the item content in consideration with cross-axis
align-content
align-content is used to align rows not items in respective of cross-axis
I know you guys will get confused what is the difference between align-items and align content
let’ s see an example by comparing align-items and align-content

As you can see above align-items: center align-items to center in respective of cross-axis and align-content align rows to the center in respective of cross-axis
we have taken an example with two rows because align-content does not affect single line
Flex item properties
order property
Using order property it’s possible to re-arrange the natural order of container items.
Default value: 0

As you can see in the above diagram,
First diagram shows default behavior where all item have order value 0
In Second diagram item 1(highlighted one) moves to last because its order value is greater than the remaining 3
In third diagram item 3 moves to the first position because it has order value -1 which smaller than the other three items
In Fourth diagram item 1 and item 3 moves to last because their order value is greater than others
flex-grow
flex-grow is allowed the item to grow as container size greater than the total items size
Default value: 0

In above example
First diagram shows default behavior where items not accommodating remaining space takes only width provided to the item
In the second diagram, you can see we made flex-grow: 1 to all items it means all items divided remaining space in equal ratio. It will behave the same if we give value as 2 to all item because we are giving ratio value
In the third diagram, item 2(highlighted one) takes twice as much as space as compared to other items because it has value 2 and it’s double of other items value
NOTE: negative values are not allowed
flex-shrink
flex-shrink property allow item to shrink as container size decreases
Default value: 0
If all items in the container have value as 1 then all the items will shrink in equal ratio
And all item have value as 1 except one item which has value 2 then this item will shrink as twice as other items
for eg.

As you can see above given flex-shrink: 2 to the third element shrink twice as much as other elements.
Negative values are not allowed
flex-basis
flex-basis is nothing but the min-width for the container items in flexbox context
Default value: Auto
For eg. If we haven’t provided value to the flex-basis property then It’s value will be auto by default, then flexbox items will take width which is equal to the content width
flex basis always given in unit it can be %, px, em, etc.
flex
flex is shorthand for flex-grow, flex-shrink and flex-basis
Default value: 0 1 auto
flex: <flex-grow> <flex-shrink> <flex-basis>
there are a number of possibilities for flex values
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;
align-self
align-self is for aligning individual item in respective of cross-axis and it will override the value set by align-items

As you can see In the above example we have given align-self: center to item 2 element and then only that item position has changed.
Examples
we have learned a lot lets take an practical example
Centering element vertically and horizantally
//html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section>
<div class="container">
<div class="item">
</div>
</div>
</section>
</body>
</html>
//css
.container {
display: flex;
width: 47%;
height: 300px;
border: 2px solid;
padding: 5px;
justify-content: center;
align-items: center;
}
.container .item {
flex-basis: 100px;
height: 96px;
border: 2px solid;
color: white;
background-color: cadetblue;
}
and output will be

Creating a Navbar
navbar.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section class="main-container">
<div class="logo-container container">
<strong>Logo</strong>
</div>
<ul class="menu-container container">
<li class="menu">
<strong>
Home
</strong>
</li>
<li class="menu">
<strong>
Contact Us
</strong>
</li>
<li class="menu">
<strong>
About Us
</strong>
</li>
</div>
</section>
</body>
</html>
and css file
.main-container {
display: flex;
background: #ce8888;
}
.container {
flex-basis: 50%;
}
.logo-container {
justify-content: flex-start;
align-items: center;
display: flex;
color: white;
padding: 10px;
font-size: x-large;
}
.menu-container {
display: flex;
height: 60px;
justify-content: flex-end;
align-items: center;
padding: 0;
width: 50%;
margin: 0;
}
.menu-container .menu {
padding: 4px 10px;
border-radius: 5px;
color: bisque;
display: flex;
justify-content: center;
align-items: center;
align-items: center;
cursor: pointer;
}
.menu-container .menu:active ,.menu-container .menu:hover{
background: repeating-linear-gradient(45deg, #824e4e, transparent 100px)
}
and output will be

You can check demo here
Conclusion
CSS flexbox has very good feature to do layout for the webpage. If you guys understand Please share it and you feel free to ask question in Comments
follow me on twitter for updates on latest projects
If you feel its valuable then just provide your email id for next challenging web development tutorial
I better understand this time.
Thank you Nitin.
Learned a lot from the post and it is really good. Please share more post related to this