CSS-Flex Box simplified

Flex-box is layout method in CSS. In HTML page every element is added sequentially as per its HTML. To make some elements arrange in rows and column structure CSS provide Flex Box. Flexbox contain one parent element which is called as flex-container and the elements need to be arranged in specific layout will be child to flex-container. Consider following layout one flex-container and four child items. To make parent element to flex following syntax is used.

.main-container{
        display: flex;
    }

Following will be our base layout for Flexbox

1. flex-direction: this property will allow to arrange child elements in row and column wise

   • flex-direction: column:- all element in column 1-2-3-4

.main-container{
        flex-direction: column;
    }

• flex-direction: column-reverse :- all element in column with reverse order 4-3-2-1;

.main-container{
        flex-direction: column-revers;
    }

• flex-direction: row :-all element in row 1-2-3-4

.main-container{
        flex-direction: row;
    }

• flex-direction: row-revers : all element in row with reverse order 4-3-2-1

.main-container{
        flex-direction: row-revers;
    }

2.flex-wrap: this property allow to set child element to multiple line or single line. For this property we will consider 12 child element.

• flex-wrap: nowrap :-everything in one line only; it is default property.

.main-container{
        flex-wrap:  nowrap;
    }

• flex-wrap: wrap :- arrange in multiple line from top.

  .main-container{
        flex-wrap:  wrap;
    }
  

• wrap-reverse: arrange in multiple line from bottom.

.main-container{
       flex-wrap: wrap-reverse;
    }

3.justify-content :- This property used to arrange elements horizontally

• justify-content: center : elements arranged horizontally at center.

.main-container{
       justify-content: center;
    }

• justify-content: flex-start :- items arranged at start of flex-direction(to work it is best to use flex-direction property). it is default property.

.main-container{
       flex-direction: column-reverse;
        justify-content:flex-start;
    }

• justify-content: start :- items arranged at start of writing-direction.

.main-container{
        flex-direction: column-reverse; 
        justify-content:start;
    }

• justify-content: flex-end:- items arranged at end of flex-direction(to work it is best to use flex-direction property)

  .main-container{
        flex-direction: row-reverse;
        justify-content:flex-end;
    }
  

  https://codepen.io/APJ-CR/pen/JjZMbWr

• justify-content: end :- items arranged at end of writing-direction.

.main-container{
        flex-direction: row-reverse;
        justify-content:end;
    }

• justify-content: space-between;

.main-container{
       justify-content:space-between;
    }

• justify-content: space-around;

.main-container{
      justify-content:space-around;
    }

4.align-items :- This property used to arrange elements vertically.

• align-items: center :- elements arranged at center of vertical axis;

  .main-container{
       align-items:center;
    }
  

• align-items: flex-start |start :-at start of vertical axis with respect to flex-direction or writing direction

  .main-container{
       align-items:start;
    }
  

• align-items: flex-end |end :-at start of vertical axis with respect to flex-direction or writing direction

  .main-container{
       align-items:end;
    }
  

5.align-content :- when we have more element which takes multiple lines at that time this property is used. In below example we have 12 child elements. It is similar to justify-content but here the space will be adjusted between lines.

• align-content: center:- Content aligned to center of flex container.

.main-container{
       flex-wrap: wrap;
        align-content: center;
    }

• align-content: space-between :- space between lines.

.main-container{
       flex-wrap: wrap;
        align-content: space-between;
    }

• align-content: space-around :- space around the lines.

.main-container{
       flex-wrap: wrap;
        align-content: space-around;

    }

6. gap, row-gap, column-gap :- This property will control gap between rows and columns.

• gap: row-gap column-gap: for row and column both
• row-gap: gap between rows
• column-gap: gap between columns

.main-container{
       flex-wrap: wrap;
        gap: 30px 20px;
    }

Github Link:-