Flexbox by Wes Bos

Flex-direction

• Works on containers.

   flex-direction : row; /* Default, wherein the main axis goes from left to right, cross axis from top to bottom. */
   flex-direction : column; /* Main axis goes from top to bottom. */
   flex-direction : row-reverse; 
   flex-direction : column-reverse;

Flex-wrap

• Works on containers.

   flex-wrap: wrap; 

Flex-ordering

• Works on flex items
  1. Default order on flex items is 0.
  2. A higher order takes the item to right.
  3. A lower order takes the item to left.
  4. Negative values of order are legit.

   order: SOMENUMERICALVALUE;

Flex-alignment with justiy-content

• Works on containers

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

To align vertically

    min-height: 100vh; /*Givin it height > contents is necessary else the container will end as soon as items are enclosed.*/
    flex-direction: column; /*change main axis from top to bottom*/
    justify-content: center; /*now the divs are aligned vertically in the center*/

Flex-alignment with align-items

• Works on containers
• Works on cross axis(!important point to notice) cos align-items:center wont work on main axis.

     align-items: stretch; /*default*/
     align-items: center; /*this aligns the item across the cross axis, not the main axis, so give container some height*/
     height: 100vh; /*Without height it wont be able to center across the cross axis.*/
     align-items: flex-end;
     align-items: baseline; /*will align to the base of the text in each box*/

Flex-alignment with align-contents

• Works on containers
• Works only on cross axis
• Removes previously defined heights on boxes
• needs wrap

    flex-wrap: wrap; /*align content requires wrap around to work*/
    align-content: stretch; /*default*/
    align-content: flex-start;
    align-content: flex-end;
    align-content: space-between;
    align-content: space-around;
    align-content: center;

Flex-alignment with align-self

• Works on flex items.
• Wors on cross axis
• Removes previously defind heights on items

   .box1 {
     align-self: stretch;
     align-self: flex-start;
     align-self: center;
     align-self: flex-end;
    }

Flex-size

• Works on flex-items
• Works on main axis

 .box{
	flex: 1; /* will make all boxes with class box of equal size and stretch full horizontally */
  }
 
 .box2 {
	flex: 2 /* Make box2 double the size */
 }