CSS3 FlexBox (Flexible Box Layout) Basics

     Flexible Layout Box is a new layout mode available in CSS3. It offers many solutions to frustrated Front-End Designer. It is always challenge to align things on the screen in right way specially in vertical way. We should not need javascript code to figure out how big the users screen is or if there is enough space left in that corner. FlexBox solves many of these annoying problems.
With Flexbox you can easily lay out elements in a flexbox container, you can align, arrange,order them(re-order them) without worrying about users screen size. You can also distribute the space between these elements.

Here is the results for FlexBox from CanIUse

I am going to use CodePen to demo some of flexbox properties.
To make an html element flexbox, we change its display value to flex or inline-flex. Let's say we have a html div element on our page and we want to make it flexbox.

Here is the html output

As you can see, it's pretty simple. We have bunch of div elements, all we did is changing display css rule to flex.
 Now we can start to explore flexbox options.

To change the direction of the items in the flexbox, we use flex-direction, the default is row.

flex-direction : row | row-reverse | column | column-reverse

row

row-reverse


column


column-reverse

If you like to see the flex-direction in action check out my demo

flex-wrap: nowrap | wrap | wrap-reverse

This property control whether the flex container is single or multi-line.
To demo this property, I am going to resize the container, so items will not fit in the container.

As you can see elements are not fitting in out container. flex-wrap is our friend in this condition.
nowrap (default)
wrap

wrap-reverse

This is great, with one line of property change, we can fit the elements in our container, Also we can reverse their order.
If you like to see the flex-wrap in action check out my demo

flex-flow : [flex-direction flex-wrap]


This property combines flex-direction and flex-wrap in one line. You can define both properties in one line with.
flex-flow : row nowrap equals to flex-direction: row; flex-wrap: nowrap

justify-content : flex-start | flex-end | center | space-between | space-around
This property aligns the items in flex container.


flex-start


flex-end


center


space-between


space-around

Another great property, It is not easy to align items in a container like this without flexbox.
If you like to see the justify-content in action check out my demo

align-items : flex-start | flex-end | center | baseline | stretch
This property works like justify-content but in vertical. To demo this I am going to remove the height from the items.


stretch (Default)


flex-start

flex-end


center


baseline



If you like to see the align-items in action check out my demo

align-content : flex-start | flex-end | center | space-between | space-around | stretch
This property is similar to justify-content property. Justify-content aligns the items in vertical way. For this property to work you need elements in multiple lines.

flex-start (default)

flex-end

center

space-between

space-around

stretch

There are more properties to cover, I am going to continue writing about flexbox properties in my next article.