Flexbox

Flexbox is one dimensional layout method for laying out items in rows or columns. Item flex to fill additional space and shrink to fit into smaller space.

The Flex Model

Convert your div (class =parent ) to Flex

.parent {
    display: flex;
}

1. Flex Direction

   The flex direction property specifies the direction of the items within the flex container.

   Note : Row is default for web.

   

    flex-direction : row | row-reverse | column | column-reverse
   

2. Flex Wrap

   It defines whether the flex item are forced in a single line or can be flowed into multiple lines depending on screen size. It persist the width of elements.

    flex:200px;   //set min width of 200px 
    flex-direction: row;  
    flex-wrap: wrap;   //flex-flow: row wrap
   

3. Two axis of flexbox

   

   Main- Axis = Defined by flex direction;

   Cross-Axis = Runs perpendicular to main-axis;

4. Justify Content

   Control where the flex items sit on the main axis.

   

          i. flex-start    ii. flex-end
        iii. center        iv. space-between  v.space-around
   

   Space around distributes all the items evenly along the main axis with a bit of space left at either end.

5. Align Content

   Control where the flex items sit on the cross axis.

   

    align-item : stretch;  //default
   
    1) flex-start  2) flex-end 3) center 4) space-between 5) space around
   

6. Align Self

   You can also position a particular item inside flex container

    align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit
   

7. Order

   Ordering of the items with flex container.

   Order of an item is relative to the rest of the container

   By default :

    order :0;  //for all flex items
   

   Note :- negative value come first; more positive value come last.

8. Flex-Grow

   The flex grow property specifies how much the item will grow relative to the rest of the flexible items insides the same container.

   Note :- Works on ratio

9. Flex-Shrink

   The flex shrink property specifies hoe the item will shrink relative to the rest of the flexible items inside the same container

10. Flex basis

Sets the initial main size of a flex item.

flex-basis: 200px;

Note : flex => shorthand property of above three

flex: 1 0 200px;
/*Three values: flex-grow | flex-shrink | flex-basis */
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex : 1 1;