Power Of "Flexbox" CSS

During styling, we faced a lot of problems daily like how to put your element in right bottom corner and a perfect center, or to make sure that all your column have the same height, or when we make a list view in mobile form zig-zag content etc. So all the problems can be solved but can be solved in an easy and smart way by FLEXBOX.

During styling, we face a lot of problems daily like how to put your element in the right bottom corner and a perfect center, or how to make sure that all your columns have the same height, or when we make a list view in mobile from zig-zag content etc. So all the problems can be solved in an easy and smart way by FLEXBOX.
 
A FLEXBOX is a smart way to align elements in a flex parent container in such a way that their position is automatically adjusted as we want and predict. It was introduced in css3 and is a pretty powerful tool for making complex UI in a small amount of CSS style code. So the question is how to use it. Here are some examples, and at the end you'll find some HTML-CSS code for making responsive masonry and product views for your website.
 
Start by making a class flex-container in style.css and use it anywhere. After applying flex all elements are adjusted in a row.
  1. .flex-container{  
  2.    display: flex;  
  3. }  
Now you can use it as any parent element for any particular child element.
  1. <div class="flex-container">  
  2.    //CHILD COMPONENTS OR ELEMENTS  
  3. </div>  
FLEX PARENT ELEMENT PROPERTIES
  1. FLEX-DIRECTION - defines in which direction flex wants to stack the flex items
  2. FLEX-WRAP - defines whether flex items should be wrapped in parent element or not
  3. FLEX-FLOW - a combination of flex-direction and flex-wrap properties
  4. JUSTIFY-CONTENT - to align your flex items horizontally
  5. ALIGN-ITEMS - to align your flex items group vertically
  6. ALIGN-CONTENT - used to align the flex lines; i.e., what are the positions of all the items vertically
FLEX-DIRECTION

This property helps us know in which direction the children elements are stacked. So, take an example of the map that has four directions North, East, West, and South. So, in that case, we have four directions too i.e.:
  • Top->Bottom ( COLUMN )
  • Bottom->Top ( COLUMN-REVERSE )
  • Left->Right ( ROW ) and this is the default value
  • Right->Left. ( ROW-REVERSE )
Note

If we use COLUMN or COLUMN-REVERSE in FLEX-DIRECTION property JUSTIFY-CONTENT and ALIGN-ITEMS & ALIGN-CONTENT properties will be swapped.
 
FLEXBOX 
 
FLEX-WRAP

This property defines if we want to wrap the content in the parent section; i.e., flex-container or not, or in reverse format. It has only three values.
  • WRAP -> all elements are wrapped inside the container so that when the sum of width and margin of all child elements is greater than the width of parent container then the next element is placed automatically in next row.
  • NOWRAP -> It's the default value, in which elements will be placed one after another in a single row or column
  • WRAP-REVERSE -> It is same as WRAP value but the only difference is that its direction is reverse i.e. 1-2-3-4 to 4-3-2-1. 

    FLEXBOX
FLEX-FLOW

This property will save us from writing two properties; i.e. saving line of codes. It helps us to write to properties at the same time.

FLEX-FLOW = FLEX-DIRECTION + FLEX-WRAP

eg. FLEX-FLOW: COLUMN WRAP-REVERSE; 
 
JUSTIFY-CONTENT

This is a useful property if you want to place child elements in a symmetrical way in a horizontal direction; i.e., left to right or right to left but if the value of FLEX-DIRECTION is COLUMN or COLUMN-REVERSE then its direction will be top-bottom or bottom-top.

Its values are,
  • FLEX-START: arrange all elements to the starting position in flex line horizontally
  • FLEX-END: arrange all elements to the ending position in flex line horizontally
  • CENTER: arrange all elements to the center position in flex line horizontally
  • SPACE-AROUND: arrange all elements in such a way that all elements will cover all the container lines, but there is a space between them, starting and ending point calculated by flex
  • SPACE-BETWEEN: same as SPACE-AROUND but with no space between them. 

    FLEXBOX
ALIGN-ITEMS

If another row of elements is added then the flex container is divided into the half container from top to bottom.
  • FLEX-START: arrange the element line for starting position in flex line vertically i.e in a row
  • FLEX-END: arrange the element line for ending position in flex line vertically i.e in a row
  • CENTER: arrange the element line for the center position in flex line vertically i.e in a row
  • STRETCH: arrange the element line for starting position in flex line and stretch them at the bottom of the container vertically.
  • BASELINE: arrange the element line in such a way that they are adjusted in their baseline no matter how small or large that element is.
    FLEXBOX
ALIGN-CONTENT

That CSS3 property is applied to the element group for their position in the container vertically.
  • FLEX-START: arrange the element group to the starting position in flex line vertically; i.e in a row
  • FLEX-END: arrange the element group to the ending position in flex line vertically; i.e in a row
  • CENTER: arrange the element group to the center position in flex line vertically; i.e in a row
  • STRETCH: arrange the element group for starting position in flex line and stretch them at the bottom of the container vertically.
  • SPACE-BETWEEN: arrange the element group in such a way that they take place at starting position and center position (if two rows of elements ) and then their position is adjusted equally at both starting and ending points.
  • SPACE-AROUND: same as above but there is space added at the start and end of the child element.
 FLEXBOX
 
FLEX CHILD ELEMENT PROPERTIES 
  • ORDER - specify the order of the items in the form of natural numbers
FLEXBOX 
  • FLEX-GROW - specify how much flex item will grow as compared to other items. The default value of flex-grow is 0. 
  • FLEX-SHRINK - specify how much flex item will shrink as compared to other items. The default value of flex-shrink is 0 too.
  • FLEX-BASIS - specify the length of a flex item 
  • FLEX - a combination of FLEX-GROW, FLEX-SHRINK, FLEX-BASIS
 FLEXBOX
 
  •  ALIGN-SELF: It aligns a particular item inside a flex-container
 
FLEXBOX 


SOME AWSOME EXAMPLES OF FLEX
 
Perfect Center

It's a div block which will stay at the center of the parent element.
 
How to get a perfect center?
 
So without using the flex way:
  1. parent{  
  2.    positionrelative;  
  3.    width100%;  
  4.    height500px;  
  5. }  
  6.   
  7. child{  
  8.    background-color#666;  
  9.    positionabsolute;  
  10.    width40px;  
  11.    height40px;  
  12.    left: 50%;  
  13.    top: 50%;  
  14.    transform: translate(-50%-50%);  
  15. }  
Pretty big, right?

Let's do it in the flex way:
  1. parent{  
  2.    display: flex; // 1  
  3.    justify-contentcenter; // 2  
  4.    align-items: center; // 3  
  5.    width100%;  
  6.    height500px;  
  7. }  
  8.   
  9. child{  
  10.    width40px;  
  11.    height40px;  
  12.    background-color#666;  
  13. }  
 AND DONE...
 
Result
FLEXBOX 
 
Another concept of flexbox is to convert zig-zag content of desktop to top-down content of mobile view. So for this concept without flexbox we have to write a lot of css and even js too. But with flex box everything is solved in some lines,
 
FLEXBOX