A Comprehensive Guide to Flexbox

Background

Before diving into the details of Flexbox, let’s understand its background and purpose. The Flexbox Layout module, also known as Flexible Box, is a W3C Candidate Recommendation. It aims to provide a flexible way to lay out, align, and distribute space among items in a container. Unlike traditional layouts, Flexbox allows containers to dynamically adjust the width, height, and order of its items to fit any screen size or device.

Flexbox is particularly useful for building components and small-scale layouts within an application. For larger-scale layouts, the Grid layout is recommended. With Flexbox, you can create complex and responsive layouts that adapt to various orientations, resizing, stretching, and shrinking scenarios.

Basics and Terminology

To understand Flexbox, it’s important to grasp its basic concepts and terminology. Flexbox is a module that consists of multiple properties. Some of these properties are meant to be applied to the container (parent element), while others are meant to be applied to the children (flex items).

Flexbox layout is based on two main axes: the main axis and the cross axis. The main axis is the primary axis along which flex items are laid out, and its direction depends on the flex-direction property. The main axis can be horizontal (left to right) or vertical (top to bottom). The cross-axis is perpendicular to the main axis.

Flex items are placed within the container along the main axis and the cross axis. The size of a flex item in the main dimension is called the main size, and the size in the cross dimension is called the cross size. Flex lines are filled with items and placed into the container, starting from the cross-start side and going towards the cross-end side.

Flexbox Properties

Flexbox provides a set of properties that allow you to control the layout and behavior of flex containers and flex items. Let’s explore these properties in detail:

Properties for the Parent (Flex Container)

display

The display property is used to define a flex container. It can have two values: flex or inline-flex. The flex value creates a block-level flex container, while the inline-flex value creates an inline-level flex container.

.container {
  display: flex; /* or inline-flex */
}

Note that CSS columns have no effect on a flex container.

flex-direction

The flex-direction property establishes the main axis of the flex container and defines the direction in which flex items are placed. It can have four values: row, row-reverse, column, or column-reverse. The default value is row.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (default): flex items are laid out from left to right in left-to-right languages, and from right to left in right-to-left languages.
• row-reverse: flex items are laid out from right to left in left-to-right languages, and from left to right in right-to-left languages.
• column: flex items are laid out from top to bottom.
• column-reverse: flex items are laid out from bottom to top.

flex-wrap

The flex-wrap property controls whether flex items should wrap onto multiple lines or stay on a single line. It can have three values: nowrap, wrap, or wrap-reverse. The default value is nowrap.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (default): flex items are laid out in a single line.
• wrap: flex items wrap onto multiple lines from top to bottom.
• wrap-reverse: flex items wrap onto multiple lines from bottom to top.

flex-flow

The flex-flow property is a shorthand for the flex-direction and flex-wrap properties. It allows you to specify both the main and cross axes of the flex container in a single declaration. The default value is row nowrap.

.container {
  flex-flow: column wrap;
}

justify-content

The justify-content property defines how flex items are aligned along the main axis and helps distribute extra free space. It can have several values, including flex-start, flex-end, center, space-between, space-around, and space-evenly.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (default): items are packed toward the start of the flex-direction.
• flex-end: items are packed toward the end of the flex-direction.
• center: items are centered along the main axis.
• space-between: items are evenly distributed in the line, with the first item at the start and the last item at the end.
• space-around: items are evenly distributed in the line, with equal space around them.
• space-evenly: items are evenly distributed in the line, with equal space between them.
• start: items are packed toward the start of the writing mode direction.
• end: items are packed toward the end of the writing mode direction.
• left: items are packed toward the left edge of the container unless that doesn’t make sense with the flex-direction, then it behaves like start.
• right: items are packed toward the right edge of the container unless that doesn’t make sense with the flex-direction, then it behaves like end.

align-items

The align-items property defines how flex items are aligned along the cross-axis on the current line. It can have several values, including stretch, flex-start, flex-end, center, baseline, first baseline, last baseline, start, end, self-start, self-end, and the safe and unsafe modifiers.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch (default): items are stretched to fill the container.
• flex-start / start / self-start: items are placed at the start of the cross-axis.
• flex-end / end / self-end: items are placed at the end of the cross-axis.
• center: items are centered along the cross-axis.
• baseline: items are aligned such that their baselines align.

align-content

The align-content property aligns a flex container’s lines within the container when there is extra space in the cross-axis. It only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse. It can have several values, including flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline, first baseline, last baseline, and the safe and unsafe modifiers.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal (default): items are packed in their default position.
• flex-start / start: items are packed to the start of the container.
• flex-end / end: items are packed to the end of the container.
• center: items are centered in the container.
• space-between: items are evenly distributed, with the first line at the start and the last line at the end.
• space-around: items are evenly distributed, with equal space around each line.
• space-evenly: items are evenly distributed, with equal space between them.
• stretch: lines stretch to take up the remaining space.

gap, row-gap, column-gap

The gap, row-gap, and column-gap properties control the spacing between flex items. The gap property is a shorthand for row-gap and column-gap, and it explicitly sets the space between items.

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

The behavior of the gap property can be thought of as a minimum gutter size, as it only takes effect when the space is smaller than the specified value. It works well in both flex containers and grid layouts.

Properties for the Children (Flex Items)

order

The order property controls the order in which flex items appear within the flex container. By default, flex items are laid out in the source order, but the order property allows you to override that order.

.item {
  order: 5; /* default is 0 */
}

Items with the same order value revert to the source order.

flex-grow

The flex-grow property defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion of the available space inside the flex container. It determines how much of the remaining space each item should take up.

.item {
  flex-grow: 4; /* default 0 */
}

Negative values are invalid.

flex-shrink

The flex-shrink property defines the ability for a flex item to shrink if necessary. It determines the ratio at which the item will shrink relative to other flex items in the container.

.item {
  flex-shrink: 3; /* default 1 */
}

Negative values are invalid.

flex-basis

The flex-basis property defines the default size of a flex item before the remaining space is distributed. It can be set to a length value or a keyword. The auto keyword means the size is based on the item’s content, while other keywords like min-content, max-content, and fit-content are not widely supported yet.

.item {
  flex-basis:  | auto; /* default auto */
}

A value of 0 means that the extra space around the content is not factored in, while auto distributes the extra space based on the item’s flex-grow value.

flex

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis combined. It allows you to specify these three properties in a single declaration. The default value is 0 1 auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

It is recommended to use the shorthand property instead of setting the individual properties separately.

align-self

The align-self property overrides the default alignment specified by align-items for individual flex items. It can have several values, including stretch, flex-start, flex-end, center, baseline, self-start, self-end, and the safe and unsafe modifiers.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | self-start | self-end + ... safe | unsafe;
}

auto aligns the item according to the value of align-items, while other values allow you to align the item differently.

Flexbox Tricks

Flexbox offers a wide range of possibilities for creating unique and powerful layouts. Here are some creative use cases and tricks you can apply to your designs:

1. Adaptive Photo Layout with Flexbox

    

   Flexbox can be used to create an adaptive photo layout that adjusts based on the available screen space. By using a combination of flexbox properties like flex-wrap, flex-grow, and align-self, you can create a responsive photo grid that adapts to different screen sizes and orientations. Check out our in-depth article on Adaptive Photo Layout with Flexbox for a step-by-step tutorial.

2. Balancing on a Pivot with Flexbox

   Flexbox allows you to balance elements on a pivot point by using the justify-content and align-items properties. By setting the justify-content value to center and the align-items value to center, you can achieve a balanced layout where elements are centered both vertically and horizontally. Learn more about this technique in this article on Balancing on a Pivot with Flexbox.

3. Using Flexbox and Text Ellipsis Together

   Flexbox can be combined with the text-overflow property to create text truncation with an ellipsis. By setting the flex-grow property to 0 and applying the necessary CSS rules for text truncation, you can create a flexible layout where text automatically truncates and shows an ellipsis when it overflows its container. Read this article on Using Flexbox and Text Ellipsis Together to learn how to implement this technique.

4. Useful Flexbox Technique: Alignment Shifting Wrapping

   Flexbox offers a useful technique for aligning items that shift and wrap across multiple lines. By adjusting the align-self property of specific flex items, you can control their alignment relative to other items. This technique is particularly useful when dealing with dynamic content or varying item heights. Dive deeper into this technique in this article on Useful Flexbox Technique: Alignment Shifting Wrapping.

5. Designing A Product Page Layout with Flexbox

   Flexbox is perfect for designing product page layouts that require flexible positioning and responsiveness. By utilizing flexbox properties like flex-direction, flex-wrap, and align-items, you can create a versatile and visually pleasing product page layout. Explore this article on Designing A Product Page Layout with Flexbox to gain insights and practical examples.

6. Flexbox and Truncated Text

   Flexbox can be combined with text truncation techniques to handle long text within limited space. By setting the flex-shrink property to 0 and applying the necessary CSS rules for text truncation, you can ensure that flex items with long text don’t disrupt the layout. This article on Flexbox and Truncated Text explains this technique in detail.

7. Flexbox and Absolute Positioning

   Flexbox can be used in conjunction with absolute positioning to create complex layouts with precise control over element positioning. By combining the position: absolute property with flexbox properties, you can achieve intricate layouts that adapt to different screen sizes. Learn more about this technique in this article on Flexbox and Absolute Positioning.

8. Filling the Space in the Last Row with Flexbox

   Flexbox provides a solution for filling the space in the last row of a flex container. By utilizing the justify-content property and the margin property, you can evenly distribute the remaining space among flex items in the last row. Discover more about this technique in our article on Filling the Space in the Last Row with Flexbox.

Browser Support

Flexbox has excellent browser support, making it a reliable choice for modern web development. Most major browsers, including Chrome, Firefox, IE, Edge, and Safari, fully support Flexbox. However, it’s essential to check the specific versions of each browser to ensure compatibility. For a detailed breakdown of browser support, refer to the Caniuse website.

Conclusion

Flexbox is a powerful tool that enables developers to create dynamic and responsive layouts with ease. By understanding the core concepts and properties of Flexbox, you can take full advantage of its capabilities and create stunning web designs. Whether you’re building a small-scale application or a complex website, Flexbox provides the flexibility and control you need to craft exceptional user experiences.

Remember to experiment with different Flexbox techniques and combine them with other CSS features to unlock the full potential of modern web design. With this comprehensive guide, you now have the knowledge and resources to master Flexbox and create beautiful, functional layouts for your projects. Happy coding!