Flex

CSS flexbox is a layout model that allows you to arrange elements (such as text, images, or other HTML elements) in a flexible way. With flexbox, you can specify how you want the elements to be positioned, how much space they should take up, and how they should respond to changes in the size of the container they're in.

At a high level, there are two main components of a flexbox layout: the container and the items. The container is the element that holds all the items you want to arrange, and the items are the elements themselves. Here we will understand how to use the flexbox properties using the following example as base.

<div id="container">
  <div style="height: 48px; width: 48px; border-radius: 2px; font-weight: bold;">1</div>
  <div style="height: 40px; width: 40px; border-radius: 2px; font-weight: bold;">2</div>
  <div style="height: 32px; width: 32px; border-radius: 2px; font-weight: bold;">3</div>
</div>

Getting started

To make a container a flexbox, you simply set its display property to flex. Once you've done that, you can use a variety of other properties to control how the items inside the container are arranged.

<div id="container" style="display: flex;">
  <div style="width: 48px; height: 48px; background: rgb(45, 212, 191)"></div>
  <div style="width: 40px; height: 40px; background: rgb(251, 146, 60)"></div>
  <div style="width: 32px; height: 32px; background: rgb(56, 189, 248)"></div>
</div>

Gap between elements

The gap property is a shorthand property that sets the gap between flex items in both the main and cross axes of the flex container.

<div id="container" style="display: flex;gap: 16px;">
  <div style="width: 48px; height: 48px; background: rgb(45, 212, 191)"></div>
  <div style="width: 40px; height: 40px; background: rgb(251, 146, 60)"></div>
  <div style="width: 32px; height: 32px; background: rgb(56, 189, 248)"></div>
</div>

Direction

The flex-direction property determines the main axis and the direction in which the flex items are laid out within the flex container.

Horizontal

row: This is the default value, and it lays out the flex items from left to right in a horizontal row. The main axis runs horizontally from left to right, and the cross axis runs vertically from top to bottom.

row-reverse: This lays out the flex items from right to left in a horizontal row. The main axis still runs horizontally from left to right, but the order of the items is reversed.

<div id="container" style="display: flex;gap: 16px; justify-content: flex-start; align-items: flex-start; flex-direction: row;">
  <div style="width: 48px; height: 48px; background: rgb(45, 212, 191)"></div>
  <div style="width: 40px; height: 40px; background: rgb(251, 146, 60)"></div>
  <div style="width: 32px; height: 32px; background: rgb(56, 189, 248)"></div>
</div>

Vertical

column: This lays out the flex items from top to bottom in a vertical column. The main axis runs vertically from top to bottom, and the cross axis runs horizontally from left to right.

column-reverse: This lays out the flex items from bottom to top in a vertical column. The main axis still runs vertically from top to bottom, but the order of the items is reversed.

<div id="container" style="display: flex;gap: 16px; justify-content: flex-start; align-items: flex-start; flex-direction: column;">
  <div style="width: 48px; height: 48px; background: rgb(45, 212, 191)"></div>
  <div style="width: 40px; height: 40px; background: rgb(251, 146, 60)"></div>
  <div style="width: 32px; height: 32px; background: rgb(56, 189, 248)"></div>
</div>

Positioning

These are the 2 main properties that deals with positioning

justify-content controls the alignment of items along the main axis of the flex container, while align-items controls the alignment of items along the cross axis of the flex container.

The main axis and cross axis are determined by the flex-direction property. If flex-direction is set to row, the main axis runs horizontally from left to right, while the cross axis runs vertically from top to bottom. If flex-direction is set to column, the main axis runs vertically from top to bottom, while the cross axis runs horizontally from left to right.

<div id="container" style="display: flex;gap: 16px; justify-content: flex-start; align-items: flex-start; flex-direction: row;">
  <div style="width: 48px; height: 48px; background: rgb(45, 212, 191)"></div>
  <div style="width: 40px; height: 40px; background: rgb(251, 146, 60)"></div>
  <div style="width: 32px; height: 32px; background: rgb(56, 189, 248)"></div>
</div>