Flexbox, also known as the Flexible Box Module, is a powerful layout system that works alongside CSS Grid to create modern, responsive designs. In this guide, we will explore the ins and outs of Flexbox and learn how to use it effectively to create flexible and dynamic layouts.

Introduction

Flexbox is a one-dimensional layout model that allows you to control the arrangement of items in a container either as a row or a column. Unlike CSS Grid, which is bi-dimensional, Flexbox focuses on organizing items in a linear manner. It is designed to help items fill the available space within their container based on predefined rules you set. By utilizing Flexbox, you can avoid relying on outdated layout techniques such as table layouts, floats, clearfix hacks, and display: table hacks.

In this guide, we will dive deep into the world of Flexbox and learn all the essential concepts necessary to become a master of this powerful layout system.

Browser Support

As of February 2018, Flexbox is supported by 97.66% of users across all major browsers. Even older browsers like IE10+ have implemented Flexbox. This high level of browser support makes Flexbox an ideal choice for creating modern layouts without worrying about compatibility issues.

Enabling Flexbox

To apply a Flexbox layout to a container, simply set the display property to either flex or inline-flex. By doing so, the contents inside the container will automatically align and adjust based on the rules defined by Flexbox.

Container Properties

Flexbox offers several properties that apply to the container, allowing you to set general rules for its items. These properties include flex-direction, justify-content, align-items, flex-wrap, and flex-flow.

Aligning Rows or Columns

The flex-direction property determines whether the items should be aligned as rows or columns. By default, it is set to row, which arranges items in a horizontal row from left to right. Other possible values include row-reverse (reverse horizontal order), column (vertical column from top to bottom), and column-reverse (reverse vertical order).

Vertical and Horizontal Alignment

By default, items start from the left side if the flex-direction is set to row, and from the top if it is set to column. You can change the alignment behavior using the justify-content property to change horizontal alignment and the align-items property to change vertical alignment.

Changing the Horizontal Alignment

The justify-content property offers five possible values:

  • flex-start: Aligns items to the left side of the container.
  • flex-end: Aligns items to the right side of the container.
  • center: Aligns items at the center of the container.
  • space-between: Distributes items with equal spacing between them.
  • space-around: Distributes items with equal spacing around them.

Changing the Vertical Alignment

The align-items property also offers five possible values:

  • flex-start: Aligns items to the top of the container.
  • flex-end: Aligns items to the bottom of the container.
  • center: Aligns items at the vertical center of the container.
  • baseline: Aligns items based on their baselines.
  • stretch: Stretches items to fit the container.
A note on baseline

The baseline value might appear similar to flex-start, but it behaves differently when it comes to handling items with varying dimensions. To witness its true effects, check out this Codepen example, which showcases how items’ dimensions are accurately aligned.

Wrapping Items

By default, items in a Flexbox container are kept on a single line and are forced to shrink to fit within the container. To allow items to wrap onto multiple lines and respect the order defined by flex-direction, use the flex-wrap: wrap property. To reverse the wrapping order, use the flex-wrap: wrap-reverse property.

Alternatively, you can use the shorthand property flex-flow to define both flex-direction and flex-wrap in one line. For example, flex-flow: row wrap sets the direction to row and enables wrapping.

Properties for Each Individual Item

In addition to container properties, Flexbox also offers properties that apply to each individual item. These properties include order, align-self, flex-grow, flex-shrink, flex-basis, and flex.

Changing Item Order with order

By default, items are ordered based on their appearance in the HTML. However, you can override this order by setting the order property on each individual item. This property allows you to reposition items relative to others within the container. For example, assigning a negative value to order will make an item appear before others.

Vertical Alignment with align-self

The align-self property allows an item to override the vertical alignment defined by align-items for that specific item. It offers the same five possible values as align-items: flex-start, flex-end, center, baseline, and stretch.

Growing or Shrinking Items

Flexbox also provides properties to control the growth and shrinking behavior of items:

flex-grow

The default value for flex-grow is 0. However, if all items have a flex-grow value of 1 and one item has a value of 2, the larger item will take the space of two “1” items when available.

flex-shrink

The default value for flex-shrink is 1. If all items have a flex-shrink value of 1 and one item has a value of 3, the larger item will shrink three times more than the other items when less space is available.

flex-basis

The flex-basis property determines the initial size of an item before the remaining space is distributed. By default, if set to auto, it sizes an item according to its width or height and adds extra space based on the flex-grow property. Setting flex-basis to 0 does not allocate any extra space for the item in the layout. If you specify a pixel value, it will use that as the length for the item (width or height, depending on the row or column orientation).

flex

The flex shorthand property combines flex-grow, flex-shrink, and flex-basis into a single line of code. For example, flex: 0 1 auto is equivalent to specifying each property individually.

The world of Flexbox offers numerous possibilities for creating dynamic and flexible layouts. By mastering the concepts and properties outlined in this guide, you will be well-equipped to leverage the power of Flexbox and create stunning designs.