Practical use cases of Flex Box in CSS

Before the arrival of CSS Flex-box layout, front end developers were dependent on floats, tables and popular CSS frameworks like Bootstrap for preparing layouts for the websites.

CSS floats have to be used with strange quirks and hacks to achieve layouts. Floats have disadvantages like no vertical centering, no equal heights, no source order independence.

CSS frameworks provide layout solutions but they are too bossy when it comes to selection of break points and it is difficult understand the inner workings of the code and customize it to suit our needs.

CSS flexbox layout system is the native css solution with a set of properties that allows developers to create flexible responsive layouts.

CSS flex box is hard, the syntax is confusing. We often stumble trying to figure out what combination of property values we have to use to come up with a required layout.

As there are innumerable resources over the internet which teach about Flex box we will only have a birds eye view of CSS flex properties and will mainly focus on practical use cases of it.

Container and flex items

Setting display property of an element to flex makes it a flex box and its children flex items.

display : flex | inline-flex

Flex Direction

Flex direction decides the direction of the flex-items inside the container.

flex-direction : row | row-reverse | column | column-reverse

There are two axes for a flex container, main axis and cross axis. The direction of the main-axis depends on the flex-direction and cross axis is always perpendicular to main axis.

Many people confuse that justify-content and align items places the items in the center or left or right, but these depend on flex direction.

Flex Properties depended on the direction of the axis

Flex Wrap

When the sum of width of all flex items is greater than the size of the flex container, they compromise with their width and try to fit inside the width of the container and if the container width is very less flex-items overflow.

Setting flex-wrap to wrap will make flex-items acquire new rows and maintain their dimensions.

flex-wrap: nowrap | wrap | wrap-reverse

Flex box ordering

Flex items have a order. By default order is set 0. When you give a positive or negative number as a value to the order property then order of the flex item changes.

order: 0 | 1 | 2 ... | -1 | -2 ....

Justify content

This property is aligned with main axis. Determines how content gets placed on the main axis on the current line.

justify-content: flex-start | flex-end | center | space-around | space-between

Align-items

This aligns with cross axis.Determines the default for how flex items get placed on the cross axis on each line.

align-items: baseline | center | flex-end | flex-start | stretch

Align Contetnt

This is aligned with cross axis and useful only when there are more than one rows. Determines the default for how cross axis lines are aligned.

align-content: center | flex-end | flex-start | space-around | space-between | stretch

Align — self

This is aligned with cross axis, but on an individual item. This is set as property of the individual item.

align-self: auto | baseline | center | flex-start | flex-end | stretch

Responsive Layout Using Flexbox

Responsive layout using Flex box

#HTML
<div class="flex-container">
      <div class="box box1">
        Lorem Ipsum...
      </div>
      <div class="box box2">
        Lorem Ipsum...
      </div>
      <div class="box box3">
        Lorem Ipsum...
      </div>
      <div class="box box4">
        Lorem Ipsum...
      </div>
</div>
#CSS
.flex-container {
  display: flex;
  justify-content: space-around;  
  flex-wrap: wrap;
}
.box {
  width: 98%;
  border: 1px solid blue;
  padding: 5px;
  background-color: red;
  margin-top: 5px;
}
@media only screen and (min-width: 576px) {
  .box {
    background-color: #41a3b3;
    width: 100%;
    margin-top: 5px;
  }
}
@media only screen and (min-width: 768px) {
  .flex-container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .box {
    background-color: #2f2fa2;
    width: 45%;
    margin-top: 5px;
  }
}
@media only screen and (min-width: 992px) {
  .box {
    background-color: green;
    width: 23%;
  }
}
@media only screen and (min-width: 1200px) {
  .box {
    background-color: grey;
  }
}

As shown in the above code the topmost div is made as the flex container and its children become flex-items. Using media queries we have changed the width of the text boxes based on the width of the screens. We have set flex-wrap property to wrap, so that flex-items can wrap whenever they cannot fit in single row.

Equal Heigh Columns

#HTML
<div class="flex-container">
      <div class="flex-item">
        <h1>Do you wish to work with us?</h1>
      </div>
      <div class="flex-item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.....
      </div>
</div>
#CSS
body{

.flex-container{
  display:flex;
  justify-content:space-around;
}
.flex-item{
  width:47%;
  border:1px solid #445678;
}
.flex-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color:#fe78a3;
}

This example contains two benefits that were difficult to achieve with regular floats. First one is vertical centering and second is columns with same height. Though first column does not have enough content to set its height equal to that of second column, align-item property of the container is set to stretch by default which makes it to stretch to meet height of second column.

Responsive Navigation Bar

#html
 <nav>
   <div class="logo">
      <img src="https://www.freelogodesign.org/Content/img/logo-ex-   7.png">
   </div>
   <div class="options">
     <ul>
       <li>About Us</li>
       <li>Services</li>
       <li>Blog</li>
       <li>Contact</li>
     </ul>
   </div>
 </nav>
#css
nav{
  width:80%;
  display:flex;   
  justify-content:space-between;
  margin:0 auto;   
  align-items: center;
}
ul{
  list-style: none;
  display: flex;                                        
}
li{
  margin-left:10px;
}            
img{
  width: 90px;
  height: 90px;                                     
}
@media only screen and (max-width:550px){
  nav{
    flex-direction: column;
    justify-content:center;
  }
}
@media only screen and (max-width:445px){
  ul{
    flex-direction: column;
    }
}

In the above example, nav is the container containing logo and div containing list of navigation items. Property justify-center is set to value space-between which ensures logo and the list are placed in the corners. When the screen size changes to below 551px, direction of the flex items changes as we set flex-direction to value column and contents are placed at center by setting justify-content to center.

The example also demonstrates use of nesting flex-boxes. The ul tag is made flex box by setting its display to flex. We have changed flex-direction when the screen size is below 446px.

Flex box layout can be used to create even complex layouts. Here I have tried demonstrating only basic use cases of flex boxes so that beginners can easily understand and get used to it.