Post
Ask Question

Power Of "Flexbox" CSS

Introduction

 
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 in 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 the 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 the 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 the 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 the 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 the 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 AWESOME EXAMPLES OF FLEX
 
Perfect Center
 
It's a div block that will stay at the center of the parent element.
 
How to get a perfect center?
 
So without using the flex way:
  1. parent{  
  2.    position: relative;  
  3.    width: 100%;  
  4.    height: 500px;  
  5. }  
  6.   
  7. child{  
  8.    background-color: #666;  
  9.    position: absolute;  
  10.    width: 40px;  
  11.    height: 40px;  
  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-content: center; // 2  
  4.    align-items: center; // 3  
  5.    width: 100%;  
  6.    height: 500px;  
  7. }  
  8.   
  9. child{  
  10.    width: 40px;  
  11.    height: 40px;  
  12.    background-color: #666;  
  13. }  
AND DONE...
 
Result
 
FLEXBOX
 
Another concept of flexbox is to convert the zig-zag content of desktop to top-down content of the mobile view. So for this concept without flexbox, we have to write a lot of CSS and even js too. But with flexbox, everything is solved in some lines,
 
FLEXBOX
 

Conclusion

 
In this article, we studied "Flexbox" CSS.


Similar Articles