A Guide to CSS Flexbox

Published on July 24, 2020

Introduction

CSS Flexbox is a powerful layout mode that allows you to create flexible and responsive layouts with ease. In this guide, we will explore the basics of CSS Flexbox and show you how to use it in your projects.

What is CSS Flexbox?

CSS Flexbox is a layout mode that allows you to define a flex container and its children elements. The flex container is the element that wraps around all the child elements, and it dictates how the children elements are laid out within it. The flex container can be defined using the display property with a value of flex or inline-flex.

Flex Container Properties

There are several properties that you can use to define the flex container:

display: Defines whether the element is displayed as a block or an inline element.
flex-direction: Defines the direction in which the children elements are laid out. The possible values are row, row-reverse, column, and column-reverse.
justify-content: Defines how the children elements are justified along the main axis. The possible values are flex-start, flex-end, center, space-between, and space-around.
align-items: Defines how the children elements are aligned along the cross axis. The possible values are stretch, flex-start, flex-end, center, and baseline.
align-content: Defines how the flexible space is distributed between the children elements. The possible values are stretch, flex-start, flex-end, center, and space-between.

Flex Item Properties

Flex items are the child elements of the flex container. You can define several properties to control how they are laid out within the container:

order: Defines the order in which the children elements are laid out. The value is a number that determines the order of the element.
flex-grow: Defines how much the child element should grow in width or height if there is excess space available. The possible values are numbers between 0 and 1.
flex-shrink: Defines how much the child element should shrink in width or height if there is not enough space available. The possible values are numbers between 0 and 1.
flex-basis: Defines the initial size of the child element before any flexible space is distributed.
align-self: Defines how the child element aligns along the cross axis, overriding the value set by the align-items property of the flex container.

Flexbox Examples

Here are some examples of how to use CSS Flexbox:

Basic Example

#container {
  display: flex;
}

#item1 {
  order: 2;
}

#item2 {
  flex-grow: 1;
}

#item3 {
  align-self: center;
}

In this example, the #container element is defined as a flex container with display: flex. The #item1 and #item2 elements are children of the container and have their own properties that define how they should be laid out within the container. The #item3 element has its own align-self property that overrides the value set by the align-items property of the container.

Nested Flex Containers Example

#container {
  display: flex;
}

#column1 {
  order: 2;
  flex-direction: column;
}

#item1 {
  flex-grow: 1;
}

#item2 {
  align-self: center;
}

In this example, the #container element is defined as a flex container with display: flex. The #column1 element is a child of the container and has its own properties that define how it should be laid out within the container. The #item1 and #item2 elements are children of the #column1 element and have their own properties that define how they should be laid out within the column.

Flexbox with Grid Example

#container {
  display: flex;
}

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#item1 {
  order: 2;
}

#item2 {
  flex-grow: 1;
}

#item3 {
  align-self: center;
}

In this example, the #container element is defined as a flex container with display: flex. The #grid element is a child of the container and has its own properties that define how it should be laid out within the container. The #item1, #item2, and #item3 elements are children of the #grid element and have their own properties that define how they should be laid out within the grid.

Conclusion

In this guide, we have explored the basics of CSS Flexbox and shown you how to use it in your projects. With these skills, you can create flexible and responsive layouts with ease. Remember to always test your layouts on different devices and browsers to ensure that they look good across all platforms.