Flexbox Responsive Grid System

Why Flexbox?

Most of the modern responsive grid systems lack the flexibility to support the functionality of shrinking, stretching, reordering etc. Also, when the size of the items are dynamically provided (not known), there is no efficient way of aligning them in a container to maintain responsiveness effectively. Flexbox was introduced to solve this problem in small and large-scale applications.

How Flexbox Works And Its Properties

To start using flexbox properties on a container and its flex items, use this on a parent container:

display: flex; //or
display: inline-flex;

flex-direction: row; 
flex-direction: row-reverse; 
flex-direction: column; 
flex-direction: column-reverse; 

Based on our choice if we want our flex items to be aligned in horizontal or vertical manner, we can choose the flex-direction as row or column respectively. In addition to the row or column properties, flexbox also provides the flexibility of row-reverse and column-reverse option.

When we choose flex-direction:row;, the x-axis becomes the main axis and the y-axis becomes the cross-axis whereas in flex-direction: column; option, x-axis works as a cross-axis and y-axis works as main-axis.

Different properties of Flexbox

1. justify-content

This property will arrange the flex items on the main-axis in one of the following arrangements:

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;

2. align-items

This property will arrange the flex items on the cross-axis in one of the following arrangements:

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;

In the align-items: baseline; flex items are aligned based on their baseline. The baseline is the line where most of the letters sit. Read more about the baseline.

The tallest flex item in the row defines the baseline and all the other flex items are aligned based on the same baseline. In this example, number 4 is the tallest and all the other flex items are aligned based on number 4's baseline.

3. flex-wrap

This property determines if the flex items should be arranged in the same line or wrapped onto multiple lines in the same flex-container.

flex-wrap: no-wrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

4. align-content

This property just like justify-content determines the arrangement of the flex items but in cross-axis when there is an extra line. This property does not produce any result if there is only one line of flex items.

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;

5. order

This property defines the order in which the flex items should be displayed either in row or column flexbox layout. By default, 0 is the order.

order: {order-number};

6. align-self

This property defines the alignment of the selected flex item inside the flex container. This property overrides the settings of align-items property.

align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: baseline;

7. flex-grow

This property defines the growth of the selected flex-item relative to the other flex items in the flex container. 0 is the default value for this property.

flex-grow: {number};

8. flex-shrink

This property defines the shrink factor of the selected flex-item relative to the other flex items in the flex container. 1 is the default value for this property.

flex-shrink: {number};

9. flex-basis

This property defines the initial width of the flex item on the main-axis. auto is the default value of this property.

flex-shrink: {number};

10. flex

This property combines the properties of flex-grow, flex-shrink and flex-shrink together. Instead of defining them separately, we can use them in this shorthand property of flex.

flex-shrink: flex-grow flex-shrink flex-basis;