The Fundamentals of CSS Flexbox: A Step-by-Step Tutorial

4 min readMar 26, 2023

CSS Flexbox is a powerful layout tool that allows you to create flexible and responsive layouts with ease. In this tutorial, we will cover the fundamentals of Flexbox, including the properties and values that you need to know to get started.

Introduction to Flexbox

Flexbox is a layout module that is included in CSS3. It allows you to create flexible and responsive layouts by using a set of properties and values. With Flexbox, you can easily align and distribute elements along a single axis or multiple axes.

Flex Container and Flex Items

To use Flexbox, you first need to define a container element as a flex container. This can be done by setting the display property of the container element to “flex”. Once the container element is a flex container, its child elements become flex items. These items can be aligned and distributed within the container using the Flexbox properties.

Flexbox Properties

There are many Flexbox properties that you can use to control the layout of your flex container and its items. Here are some of the most commonly used properties:

flex-direction:

This property sets the direction of the main axis of the flex container. The main axis is the axis along which the flex items are arranged. The possible values are “row”, “row-reverse”, “column”, and “column-reverse”.

justify-content:

This property sets the alignment of the flex items along the main axis of the flex container. The possible values are “flex-start”, “flex-end”, “center”, “space-between”, “space-around”, and “space-evenly”.

align-items:

This property sets the alignment of the flex items along the cross axis of the flex container. The cross axis is the axis perpendicular to the main axis. The possible values are “flex-start”, “flex-end”, “center”, “baseline”, and “stretch”.

align-self:

This property sets the alignment of a single flex item along the cross axis of the flex container. It overrides the align-items property for that specific item.

flex-wrap:

This property sets whether the flex items should wrap onto multiple lines if they cannot all fit on a single line. The possible values are “nowrap”, “wrap”, and “wrap-reverse”.

flex-flow:

This property is a shorthand for the flex-direction and flex-wrap properties. It allows you to set both properties in a single line.

flex-grow:

This property sets the ability of a flex item to grow to fill the available space. The value is a number that represents the proportion of available space that the item should take up.

flex-shrink:

This property sets the ability of a flex item to shrink if necessary. The value is a number that represents the proportion of available space that the item should give up.

flex-basis:

This property sets the initial size of a flex item before any remaining space is distributed. The value can be a length, a percentage, or “auto”.

order:

This property sets the order of a flex item within the flex container. The default value is 0, and higher values make the item appear later in the order.

Examples of Flexbox Layouts

This example creates a flex container with three boxes inside. The container has display: flex to enable flexbox layout. It has a flex-direction: row property, which arranges the boxes in a row from left to right.

HTML:

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.box1 {
  order: 2;
}

.box2 {
  order: 3;
}

.box3 {
  order: 1;
}

The justify-content: space-between property ensures that the space between the boxes is evenly distributed, so the boxes are evenly spaced apart. The align-items: center property centers the boxes vertically in the container.

To further explain the example, the order property is one of the many properties that can be used with flexbox to control the layout of flex items. It specifies the order in which the flex items should appear in the flex container. By default, flex items have an order of 0, but you can use the order property to change the order.

In the example, we set the order property for each box element. box3 has an order value of 1, so it appears first in the row, before box1 and box2. box1 has an order value of 2, so it appears after box3, and box2 has an order value of 3, so it appears last in the row.

Using the order property is just one way to control the layout of flex items in a flex container. There are many other properties that can be used to control the size, position, and alignment of flex items, such as flex-grow, flex-shrink, and flex-basis. By mastering these properties, you can create complex and dynamic layouts using CSS flexbox.

In summary, CSS flexbox is a powerful layout tool that can be used to create responsive and flexible web designs. Understanding the fundamentals of flexbox, such as the main axis and cross axis, flex container and flex item properties, and how to use them effectively, is essential for creating modern web layouts. With a little practice, you can become a flexbox pro and take your web design skills to the next level.