CSS Flexbox Guide

CSS is something Web Developers often struggle with. When I started to make static websites the first thing I wondered was how two or more divs were placed side by side in most of the sites. One way to do it is using "float" property in CSS but the results are inconsistent, and not much responsive. In CSS3 Flexible Box Layout (Flexbox) solved this problem. So let's understand how the flexbox works.

How the Divs are arranged by default.

⏩ Note: Skip this if you know how block level elements arranged by default.

MacBook - 1.png

Normally divs in an container are arranged one above another and not side by side because they are block level elements, meaning they occupy entire horizontal space.

Understanding Flexbox.

Flexbox isn't a CSS property, it's is a CSS module with various properties which provides efficient way to align, distribute space and avoid overflowing.

There are various properties let's look at the properties which can be applied to Parent Element.

Parent Properties (Flex Container)

1️⃣ display: flex; When display: flex is applied the child items become flexible.

2️⃣ flex-direction: row | column | row-reverse | column-reverse; Flex-direction property sets the direction of items in the flex container. The row value set the flex items horizontally and column sets it vertically.

Run the below code for better understanding

<div class="container">
      <div class="box box1">
        <h1>Box 1</h1>
      </div>

      <div class="box box2">
        <h1>Box 2</h1>
      </div>

      <div class="box box3">
        <h1>Box 3</h1>
      </div>
    </div>
.container {
  display: flex;
  width: 70rem;
  border: 2px solid black;
  padding: 1rem;
  /* flex-direction: row | row-reverse | column | column-reverse; */
}
.box {
  height: 15rem;
  width: 15rem;
  text-align: center;
  border: 2px solid black;
}
.box1 {
  background-color: #faa0a0;
}
.box2 {
  background-color: #baffee;
}
.box3 {
  background-color: #ffc8f9;
}

The above code would produce result similar to this👇

Untitledflex1(1).png

3️⃣ flex-wrap: nowrap | wrap | wrap-reverse; Flex-wrap property will wrap the flex items. By default there is nowrap value applied, which will fit all items in one line.

4️⃣ justify-content: flex-start | flex-end | center | space-around; Justify content aligns the items in main axis (mostly horizontally) depending upon the value.

5️⃣ align-items: flex-start | flex-end | center | baseline; Align items aligns the items in along the cross axis (mostly vertically) depending upon the value.

Changing the CSS code

  .container {
  display: flex;
  width: 125rem;
  border: 2px solid black;
  padding: 1rem;
  /*  flex-direction: column | row; */
  /*  justify-content: flex-start | flex-end | center | space-around; */ 
  /*  align-items: center | flex-start | flex-end | baseline; */
}

flexflexing.png

⏩ Note: Apply justify-content: center to center items when direction is row and align-items: center when direction is column. Also apply different values and see the results to learn more.

6️⃣ flex-flow: column warp Flex flow is combination of flex-direction and flex-wrap. By default its value is row and nowrap.

Children Properties (Flex items)

1️⃣ flex-grow: 1 Flex grow takes unitless values and grows the item in that proportion. Ex: if value for one item is 2 it grows twice as large.

2️⃣ flex-shrink: 1 Flex shrink shrinks the item if necessary.

3️⃣ flex-basis: 5rem Flex basis takes a value which is set as the default size of the element before distributing the space. You use flex-basis, flex-grow in children and flex-wrap in parent together to get responsive layout.

4️⃣ flex: 1 1 20rem Flex is a short hand property where 1st value is for flex-grow, 2nd value is for flex-shrink an 3rd value is flex basis.

5️⃣ align-self: flex-start | flex-end | center | baseline; Align self is used to particular items.

6️⃣ order: 3 Order is used to change the default order of items.

Run this code to learn more

.container {
  display: flex;
  margin: 5rem;
  border: 2px solid black;
  flex-wrap: wrap;
}
.box {
  height: 15rem;
  text-align: center;
  border: 2px solid black;
  flex: 1 1 35rem;
}
.box1 {
  background-color: #faa0a0;
}
.box2 {
  order: 3;
  background-color: #baffee;
}
.box3 {
  background-color: #ffc8f9;
}

Expected output 👇

flexflex123.png

Thank you for you time 🤗