Flexbox Tutorial

  PARENT CONTAINER

 ITEM CONTAINER

 

   display


display: flex;

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.


 
 

  flex direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical column.




flex-direction: row ;

flex-direction: row-reverse ;

flex-direction:column ;


flex-direction: column-reverse;
}