Demystifying Flexbox: A Comprehensive Guide to Flexible Layouts

How your content is presented can reveal much about you or your company. Having excellent content and learning how to present it transparently is crucial so your user can understand.
So how do we decide how to present our content? Our CSS code is in charge of displaying our content attractively and respectfully.
From the inception of browsers, we have been creating and enhancing new ways to deal with CSS, which has always been one of the most crucial aspects of web development. Layout design for websites used to be a challenging task. We used CSS attributes like float, position to place several items, and inline-block styling.
It is becoming simpler to generate various experiences on our web pages because we no longer rely on their features to produce them. The web has advanced to the point where we can now work with Flexbox and CSS Grid as CSS layout technologies.
Early consideration of the best layout system for your project will assist you in producing better results and well-written CSS. We will examine when to utilize Flexbox and when to use CSS Grid in this post. It is not a complicated issue, but knowing the answer now will save you time when maintenance and refactoring are involved.

What is Flexbox?

To make it easier for us to create responsive web pages and organize our sections, a new layout system called Flexbox was introduced in 2009. Since then, it has drawn increasing amounts of attention. It turns out that the primary layout system for contemporary websites is still being used.
We can design a row or column axis layout using the one-dimensional Flexbox layout framework. Creating responsive web pages without resorting to complicated workarounds and numerous float and position attributes in our CSS code is more straightforward for us.
Before discussing when to use each, let us discuss a few characteristics that set Flexbox and Grid apart. You can read these introductory articles on Flexbox and Grid if you want to learn more about the features of those elements or how to use them.
Let us say our HTML contains a div that contains three child components. All you have to do is use the display: flex property to create a flex container. After then, each element contained in the flex container becomes a flex item.

Flexbox Layout

Flexbox was the first CSS layout technique that operated entirely differently from standard CSS. Flexbox cares about a main axis and a cross axis rather than block/inline items.
This means any layout technique that uses the main axis will arrange items horizontally, whereas any layout technique that uses the cross axis will arrange elements vertically.

• Justify Content
  We will suppose that the flex items in each of these cases have a 20% width.
  
  .div-flex-item{
  Width: 20%;
  }
  
  
• Flex Start
  All items are positioned at the main axis left side, which is where the axis starts by default. This is also how justify-content operates by default.
  
  .div-flex-item{
  Display: flex;
  
  Justify-content: flex-start;
  }
  
  
• Flex End
  All items are positioned at the right side of the axis, at the end of the main axis.
  
  .div-flex-item{
  Display: flex;
  
  Justify-content: flex-end;
  }
  
  
• Center
  Places everything in the main axis center. One of the simplest methods for CSS element centering is this.
  
  .div-flex-item{
  Display: flex;
  
  Justify-content: center;
  }
  
  
• Space-between
  In order to keep the elements as far away from one another as feasible while filling the entire container, this equitably distributes the surplus space inside the container among each element.
  
  .div-flex-item{
  Display: flex;
  
  Justify-content: space-between
  }
  
  
• Space-around
  Although it also adds space between the first and last elements, this is very similar to space-between. The distance between the first and last element and the outside of the container is exactly equal to the distance between the elements.
  
  .div-flex-item{
  Display: flex;
  
  Justify-content: space-around;
  }
  
  
• Align Items
  For all of these examples, we will assume that the flex items all have a 20% width but that the elements all have varying heights.
  
  .div-flex-item{
  Width: 20%;
  }
  
  .div-flex-item:nth-child(1){
  Height: 80px;;
  }
  
  .div-flex-item:nth-child(2){
  Height: 180px;
  }
  
  .div-flex-item:nth-child(2){
  Height: 280px;
  }
  
  
• Stretch
  Unless a specified height is given, all items will be expanded to fill the entire height of the cross-axis. In our example, I initialized the first child height, which is essentially the same as not setting a height for the first child. By default, a div height is determined by the height of the content it contains; however, as you can see below, the first child fills the container to its full height because it is extending to do so. Despite this, the second element is not stretching because we gave it a defined height of 180px. This is the align-items default behavior.
  
  .div-flex-item{
  Display: flex;
  
  Align-items: Stretch
  }
  .div-flex-item:nth-child(1){
  Height: initial
  }
  
  
• Flex Start
  Similar to flex-start for justify-content, but by default starting at the top of the cross-axis.
  
  .div-flex-item{
  Display: flex;
  
  Align-items: flex-start;
  }
  
  
• Flex End
  Similar to flex-end for justify-content, but by default starting at the bottom of the cross-axis.
  
  .div-flex-item{
  Display: flex;
  
  Align-items: flex-end;
  }
  
  
• Center
  Similar to the center for justify-content, but with the centering determined by the cross-axis.
  
  .div-flex-item{
  Display: flex;
  
  Align-items: center;
  }
  
  

Conclusion

This now covers every possible layout option for elements along the main and cross-axis, but you should be aware of one vital detail concerning the flexbox axis. They can be switched. The main and cross axis are oriented according to a property called flex-direction.