Flexbox in CSS

1. Flexbox

Flexbox allows us to align and distribute space among items in a container. It also gives the ability to control the behavior of elements on unknown screen sizes. Flexbox items can align themselves in a single row or stack on top of each other and also have the ability to shrink and grow depending on the screen size.

2. Centering elements using flexbox

Centering the elements of a web page has never been easier, one of the common uses of flexbox is centering the elements on a web page.

2.1. Horizontally

justify-content: center is used to center flex items horizontally.

Html:

<div class="parent">
    <div class="child">
  </div>
</div>

CSS:

body{
  height: 100vh;
  background: lightyellow;
}

.parent{
  height: 100%;
  display: flex;
  justify-content: center;
}

.child{
  height: 5rem;
  width: 5rem;
  background: lightblue;
  margin: 1rem;
}

Output:

justify-content: center centers the elements along the axis specified by flex-direction. I.e., for a horizontal ( flex-direction: row ) flexbox, this centers horizontally, and for a vertical flexbox ( flex-direction: column ) flexbox, this centers vertically.   

2.2. Vertically

align-items: center is used to center elements vertically.

body{
  height: 100vh;
  background: lightyellow;
}

.parent{
  height: 100%;
  display: flex;
  align-items: center;
}

.child{
  height: 5rem;
  width: 5rem;
  background: lightblue;
  margin: 1rem;
}

Output:

align-items: center centers the elements along the axis other than the one specified by flex-direction. Default flex-direction is row. 

2.3. Horizontally as well as Vertically

Elements can be centered both vertically and horizontally using align-items: center and justify-content: center. Take a look at the below example

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

CSS

body{
  height: 100vh;
  background: lightyellow;
}

.parent{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child{
  height: 5rem;
  width: 5rem;
  background: lightblue;
  margin: 1rem;
}

Output:

As you can see all the child elements have been centered both horizontally and vertically.

2. Responsive Elements

Flexbox can be used to create responsive layouts without using media queries to some extent.

Html:

<div class="parent">
  <div class="child">
    1
  </div>
    <div class="child">
      2
  </div>
    <div class="child">
      3
  </div>
    <div class="child">
      4
  </div>
    <div class="child">
      5
  </div>
</div>

CSS:

body{
  height: 100vh;
  background: lightyellow;
}

.parent{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
}

.child{
  height: 5rem;
  width: 10rem;
  background: lightblue;
  margin: 1rem;  
  font-size: 20px;
  font-weight: bold;
  flex-grow: 1;
  flex-shrink: 0;
}

This will produce a web page where the child elements will stay in a single to but as soon as the screen size changes they will start stacking on each other.

Preview

3. Reversing the order of elements

flex-direction: row-reverse or flex-direction: column-reverse is used to reverse the ordering of elements of a flexbox.

Html:

<div class="parent">
  <div class="child">
    1
  </div>
    <div class="child">
      2
  </div>
    <div class="child">
      3
  </div>
    <div class="child">
      4
  </div>
    <div class="child">
      5
  </div>
</div>

CSS:

body{
  height: 100vh;
  background: lightyellow;
}

.parent{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.child{
  height: 5rem;
  width: 10rem;
  background: lightblue;
  margin: 1rem;  
  font-size: 20px;
  font-weight: bold;
}

Output:

4. Conclusion

Flexbox is a very useful and important property there a lot of uses of flexbox that can be used in a variety of situations. After understanding how flexbox works and how to use it, it should be very easy to create complex layouts.