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

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

Items will be placed from main-start to main-end Main size: width or height of the container depending upon flex-direction

width or height of the container depending upon flex-direction Cross-axis: Cross axis is perpendicular to the main 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

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 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

items will be placed from right to left column: Items will be placed vertically top to bottom

Items will be placed vertically top to bottom column-reverse: Items will be placed bottom to top

Items will be placed bottom to top initial: It set’s value to the default

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

: 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

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

: Align items to the center flex-end : Align items to the end of the container as per flex-direction

: Align items to the end of the container as per flex-direction space-around : Gives space around the items by adjusting width

: Gives space around the items by adjusting width space-between : gives space between the items not at the start and end of the container

: 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

: gives an equal amount of space around the item start : Align items to the start of the container as per writing mode direction

: 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

: 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

: align-items to the start of the container in consideration with cross-axis center : align-items to the center in consideration with cross-axis

: align-items to the center in consideration with cross-axis flex-end : align-items to the end in consideration with cross-axis

: 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