Flexbox at a glance

What is Flexbox??

As the Mozilla documentation says Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. now this seems complex and unclear about its intentions

Why Flexbox??

Now in modern days, this type of design is quite famous, like with a heading on one side and an image on the other side. For a long time, it is hard to create this type of design float and positioning is there to help but it has their own problems (like responsiveness, and overflow of below elements). so the issue without flexbox is

• Vertically centering a block of content inside its parent.
• Making all the children have equal space between them in both rows and column
• Maintaining the same property between elements in different screen sizes

Flebox properties

1. Display
   • This is the most basic property. It applies to the container and enables the power of the flexbox to the
     entire div. there are two values for this property
     • display:flex
     • display:inline-flex
2. Flex-direction
   • This property helps to align the direction of the flex. this property decides whether the child should be placed according to row or according to the column in simple words this property decides the main axis for the flex of the container. two values can be applied
     • flex-direction:row
     • flex-direction:column
3. Flex-wrap
   • When there is a fixed height and fixed width associated with the child so the children overflow and disturb the whole look of the div. The default property associated is no-wrap so the divs scramble up and flexbox children will overflow their container, breaking the layout. The different values that can be associated with the flex-wrap are

flex-flow: row;  
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

4.Justify-content

• The CSS justify-content property defines how the browser distributes space between and around child divs along the main axis of a flex container. This property is applied to the container. Controls that can be applied are

  justify-content: center;  
  justify-content: flex-start; 
  justify-content: flex-end;    
  justify-content: start;       
  justify-content: end;
  

5.Align-items

• the CSS justify-content property works somewhere the same as justify-content but applies to the cross axis. It gives space between and around child divs along the cross axis of a flex container. This property is applied to the container. Controls that can be applied are

  align-items: center;  
  align-items: flex-start; 
  align-items: flex-end;    
  align-items: start;       
  align-items: end;
  

  6.Flex
• A container can have a fixed sizing but to make the children more responsive it should have flexible sizing. The default value is 1 so if any children should have a bigger size than normal so it should have a flex property greater than one

  flex  : 1
  flex  : 2
  

  7.Order
  • Generally, the divs line up as the elements are ordered in HTML but there is a way to manipulate this. Default Order property for elements are 0 .so to send the element at the end of the list then use any greater than 0 to send the element at the front use negative values

    Order:1
    Order:-1
    

    These are the most used properties from flexbox. But the disadvantage of flexbox is that it can only control one main axis. But to get more control or to get 2D control use GRID*.