Mastering Flexbox: A Beginner’s Guide to Responsive Layouts in CSS

The problem❓

Have you ever encountered a problem that you create a div with a certain width and height and want to place it in the center of the page? Maybe you are creating a nav bar and you want to align all the items to the horizontal center of the box and keep them equally spaced. We usually do the hit and trial approach to solve the problem by tring out various values of margin and paddings to align the items and space them evenly. But this is not always completely accruate and also, the design becomes hardcoded and is not responsive to different screen sizes.

So, is there any way we can solve this problem using CSS?

The solution🔓

The answer is YES. CSS provides us with a display property called as Flexbox. Flexbox is short for Flexible box layout. As the name suggest, flexbox provides us with a way to align HTML elements in a flexible and responsive way.

Flexbox is a one-dimensional layout model. It provides a way to align HTML elements in a horizontal or vertical row. Flexbox contains various properties which can be used for alignment, spacing, and distribution of HTML elements. If we make a box as flex then CSS provides us with the power to manipulate all it's children or nested elements using the properties of flexbox.

To specify an element as flexbox we specify it's diplay property as flex.

div {
  display: flex;
}

Flexbox Terminologies📝

To understand flexbox, we need to understand some common terminologies related to it.

1. Flex Container: - A flex container is an HTML element that contains one or more flex items. It provides a way to align the flex items in a flexible and responsive way.

2. Flex Item: - A flex item is an HTML element that is a direct child of a flex container. It provides a way to align the flex items in a flexible and responsive way.

3. Main Axis: - Main axis is a property that specifies the direction of the flex items. It can be set to row or column. Main axis is horizontal to the flex direction.

4. Cross Axis: - Cross axis is a property that specifies the direction of the flex items. It can be set to row or column. Cross axis is vertical to the flex direction.

Flexbox Properties📃

Flexbox provides us with a set of properties which can be used to align HTML elements in a flexible and responsive way. Some of the commonly used properties are mentioned below.

1. Flex-Direction: - Flex-direction is a property that specifies the direction of the flex items. It can be set to row, column, row-reverse and column-reverse. By default the flex direction is row. When we select the reverse directions, the direction of our main and cross axis reverses.

/* Flex Direction */
div {
  display: flex;
  flex-direction: row; /* Default */
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;
}

2. Justify-Content: - Justify-Content is a property that specifies the alignment of the flex items along the main axis. It can be set to flex-start, flex-end, center, space-between, space-around and space-evenly. By default the justify-content is flex-start.

/* Justify Content */
div {
  display: flex;
  justify-content: flex-start; /* Default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

3. Align-Items: - Align-Items is a property that specifies the alignment of the flex items along the cross axis. It can be set to flex-start, flex-end, center, baseline, stretch. By default the align-items is stretch.

/* Align Items */
div {
  display: flex;
  align-items: flex-start; /* Default */
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
  align-items: stretch;
}

4. Gap: - Gap is a property that specifies the space between the flex items. It can be set to a length value or a percentage value. By default the gap is 0.

/* Gap */
div {
  display: flex;
  gap: 10px; /* Default */
  gap: 20px;
  gap: 30px;
}

5. Align-Self: - Align-Self is a property that specifies the alignment of the flex item along the cross axis. This property is similar to align-items but it is used inside a specific flex-item rather then the parent element. This element affects only the selected flex-item.

/* Align Self */
div {
  display: flex;
  align-self: flex-start; /* Default */
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

6. Justify-Self: - Similar to align-self, justify-self is a property that specifes the alignment of the flex item along the main axis. This property is similar to justify-content but it is used inside a specific flex-item rather then the parent element. This element affects only the selected flex-item.

/* Justify Self */
div {
  display: flex;
  justify-self: flex-start; /* Default */
  justify-self: flex-end;
  justify-self: center;
  justify-self: space-between;
  justify-self: space-around;
  justify-self: space-evenly;
}

Flexbox Example🖥️

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Example</title>
    <style>
      div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Conclusion🙏🏻

Flexbox is a powerful tool that can be used to align HTML elements in a flexible and responsive way. Along with this, it also provides us with the power to manipulate all it's children or nested elements using the properties of flexbox. Flexbox is a very useful tool that can be used to create complex layouts and designs. Flexbox, along with other display properties like grid can be used together to create complex layouts and designs.