Flexible box layout

Flexible box layout generally known as flexbox, is layout module to control the layout of child elements. It used to controlling and managing the available spacing between the child elements.

display : flex

This makes all the childs a flex-item, and place all of them on the main axis.

Let’s Understand the basics first

We Play here in 2 directions, we call it here axis Main Axis (flex place elements in main axis) and Cross Axis (prependicular to main axis).

By Default all the child elements (items) placed in the main axis, it doesn’t mind if it overflows from screen. Items get shrink to fit in the window as flex-shrink set to 1 by default, but vice-versa is not true, items not grow itself if there is some available space remaining as flex-grow set 0 by default.

What is Flex-shrink/grow and how to adjust them?

These are ratios of shrink/grow compared with other flex-items or sibilings, flex-shrink is how fast the flex-item get shrink as compared to its other sibilings while flex-grow is how fast the flex-item grows as compared to its other sibilings.

Lets take an example,
lets we have 2 boxes A and B and with flex-shrink set to 2 and 3 respectively, it means shrink ratio of A and B is 2:3, i.e. Box A shrinks at the speed of 2 unit while B shrinks at the speed of 3 unit, but shrinking happens only when we don’t have enough space in the main axis to fit all the items.
Similiarly for flex-grow, items will grow only when there is available space left after placing all elements.

what if we don’t want to shrink elements instead we want overflowing elements in other line?

It can be done using property flex-wrap, by default it set value nowrap, we can change it to wrap and then overflowing elements can be adjusted in next line.

How to adjust space within each line?

It can be done with justify-content property in flexbox. It used to adjust space within the main axis.

justify-content : start;  /*items set from start to end remaining space set in end */
justify-content : end;  /*items set from end to start remaining space set in start */
justify-content : center; /* items set in the center remaining space set in both sides */
justify-content : space-between;  /*items set from start to end remaining space set between elements */
justify-content : space-evenly;  /*items set from end to start remaining space set in evenly in side of elements*/

What for adjust space in cross-axis?

It can be done with align-items property in flexbox. It used to adjust space within the cross axis.

align-items : stretch;  /*stretch items to cover space in cross axis*/
align-items : center;  /*place items in center of cross axis */
align-items : start; /* place items in start space remain vacant in end */
align-items : end  ;  /* place items in end space remain vacant in start */

Can we change the direction of main axis and cross axis?

Yes, we can change the direction using flex-direction, just remember the directions, all the concepts remains same, justify-content adjust the items in main axis and align items adjust the elements in the cross axis.