FLEXBOX  CheatSheet

FLEXBOX CheatSheet

Flex-box in CSS offers space distribution between items in an interface and powerful alignment capabilities.
Below are a few important flexbox properties we'll discuss in this blog.

  • justify-content

  • align-items

  • flex-direction

  • order

  • align-self

  • flex-wrap

  • flex-flow

The important thing in Flexbox to remember, it works on the main axis and the secondary axis(perpendicular to the main axis), the main axis, left to the right and the secondary axis will be the other one. And if we reverse the direction of the main axis, then the direction of secondary the axis will also get reversed.

  1. Flex-direction: has four values row, row-reverse, column, and column-reverse. row, row-reverse will go inline with main axis, and column, column-reverse will go top to bottom.

     flex-direction: row;  will turn elements in row manner(default)
     flex-direction: row-reverse; will reverse the row
     flex-direction: column; will turn elements in column manner
     flex-direction: column-reverse; will reverse the column
    
  2. justify-content: works on the main axis of the flex container. Commonly used values are, start, center, end, space-between, and space-around.

     justify-content: flex-start; will shift the items in the container to the start of the main axis.
     justify-content: flex-center; 
     justify-content: flex-end;
     justify-content: space-around; will give some padding to the container.
     justify-content: space-between; will give some space between the containers.
    
  3. align-items: works on the secondary axis (top to bottom if the main axis is left to right). Commonly used values are a start, end, center, and stretch.

     align-items:flex-start;
     align-items:flex-center;
     align-items:flex-end;
     align-items:flex-stretch;
    
  4. order: write property only for 1 or 2, use order property to an individual item, order:0 is the default, highest order will go at the end and lowest will go first, if 2 divs have same order then first come first service

     item1{
     order:-1; means the item1 will be placed at the very start.
     }
    
  5. align-self: works top to bottom, values are flex-stretch, flex-center, flex-start and flex-end.

     item1{
         align-self:flex-end;
     }
    
  6. flex-wrap: It is used on the container(the container can have multiple div ), not on each item in the container. We use the flex-wrap property so that elements do not get squeezed when the screen size is small. The elements in the container will get stacked up in a particular direction. Values are wrap, nowrap, column-wrap.

     #container{
         display:flex;
         flex-wrap:wrap;
     }
    
  7. flex-flow: decides the direction of flex-container and how will they wrap. It is like combining flex-direction and flex-wrap both properties.

    few examples:

     #container{
         display:flex;
         flex-flow:column wrap; will set items in container in column manner.
     flex-flow: row wrap;
     flex-flow: column-reverse wrap-reverse;
     flex-flow: row-reverse nowrap;
     }