Mastering CSS Flexbox for Modern Layouts

Flexbox (Flexible Box Layout) is a powerful layout model in CSS that enables developers to design flexible and responsive web layouts without needing to rely heavily on floats or positioning. In this post, we’ll explore Flexbox from its basic concepts to more advanced alignment techniques and real-world use cases.

Open Table of Contents

What is Flexbox?
- Flexbox Terminology
- Basic Flexbox Properties
Advanced Flexbox Features
Nested Flexbox Layouts
How to practice Flexbox with lots of fun
Conclusion
References

What is Flexbox?

Flexbox is a layout model introduced in CSS3 that allows you to align and distribute space among items within a container, even when their size is unknown or dynamic. Flexbox works particularly well for one-dimensional layouts—either row-based or column-based—making it ideal for building responsive layouts.

Flexbox Terminology

Flex container: The parent element containing flex items.
Flex items: The child elements that are direct children of a flex container.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex; /* Declares the container as a flexbox */
}

Basic Flexbox Properties

There are several key properties that control the behavior of the flex container and its items.

Flex Container Properties

Main properties that control the layout of the flex container.

display: flex: defines a container as a flex container.
flex-direction: specifies the direction of the main axis (row or column). row (default) | row-reverse | column | column-reverse

.container {
  display: flex;
  flex-direction: column-reverse; /* Items are laid out vertically in reverse order */
}

flex-wrap: specifies whether items should wrap onto multiple lines. nowrap (default) | wrap | wrap-reverse

.container {
  display: flex;
  flex-wrap: wrap; /* Items wrap onto multiple lines */
}

justify-content: aligns items along the main axis. flex-start (default) | flex-end | center | space-between | space-around | space-evenly

.container {
  display: flex;
  justify-content: space-between; /* Items are evenly distributed with space between */
}

align-items: aligns items along the cross axis. stretch (default) | flex-start | flex-end | center | baseline

.container {
  display: flex;
  align-items: center; /* Items are centered vertically */
}

Flex Item Properties

There are also properties that control the behavior of individual flex items.

flex-grow: specifies how much an item should grow relative to the rest of the items. 0 (default) | <number>

.item {
  flex-grow: 1; /* Item grows to fill the available space */
}

flex-shrink: specifies how much an item should shrink relative to the rest of the items. 1 (default) | <number>

.item {
  flex-shrink: 1; /* Item shrinks to fit the available space */
}

flex-basis: specifies the initial size of an item before growing or shrinking. auto (default) | <length> | <percentage>

.item {
  flex-basis: 100px; /* Sets a base size of 100px */
}

align-self: allows individual items to override the align-items property. auto (default) | flex-start | flex-end | center | baseline | stretch

.item {
  align-self: flex-end; /* Item aligns to the end of the cross axis */
}

Alignment and Justification

Flexbox provides powerful alignment and justification properties that make it easy to position items within a flex container.

justify-content: aligns items along the main axis. (Horizontal alignment) flex-start | flex-end | center | space-between | space-around | space-evenly

.container {
  display: flex;
  justify-content: center; /* Items are centered along the main axis */
}

align-items: aligns items along the cross axis. (Vertical alignment) flex-start | flex-end | center | baseline | stretch

.container {
  display: flex;
  align-items: center; /* Items are centered along the cross axis */
}

align-self: allows individual items to override the align-items property. (Individual alignment) auto | flex-start | flex-end | center | baseline | stretch

.item {
  align-self: flex-end; /* Item aligns to the end of the cross axis */
}

Flexible Sizing

Flexbox allows you to create flexible layouts that adapt to different screen sizes and content lengths.

flex: shorthand property for flex-grow, flex-shrink, and flex-basis. <flex-grow> <flex-shrink> <flex-basis>

.item {
  flex: 1 1 0; /* Item grows and shrinks equally with a base size of 0 */
}

flex-grow: specifies how much an item should grow relative to the rest of the items. 0 | <number>

.item {
  flex-grow: 1; /* Item grows to fill the available space */
}

flex-shrink: specifies how much an item should shrink relative to the rest of the items. 1 | <number>

.item {
  flex-shrink: 1; /* Item shrinks to fit the available space */
}

flex-basis: specifies the initial size of an item before growing or shrinking. auto | <length> | <percentage>

.item {
  flex-basis: 100px; /* Sets a base size of 100px */
}

Advanced Flexbox Features

Flexbox offers several advanced features that allow you to create complex layouts with ease.

order: specifies the order in which items are displayed. <integer>

.item {
  order: 1; /* Item is displayed first */
}

Nested Flexbox Layouts

You can nest flex containers within other flex containers to create more complex layouts.

<div class="container">
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
</div>

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}

How to practice Flexbox with lots of fun

There are several online games and tutorials that can help you practice and master Flexbox in a fun and interactive way. Here are a few popular ones:

Conclusion

Flexbox is a powerful layout model in CSS that allows you to create flexible and responsive layouts with ease. By mastering the basic concepts and advanced features of Flexbox, you can design modern web layouts that adapt to different screen sizes and content lengths. Practice your Flexbox skills with online games and tutorials to become a Flexbox expert.