Flexbox in CSS

What is Flexbox?

CSS Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange elements in rows or columns. It provides convenient control over alignment, spacing, sizing, and the order of elements.

In this chapter, we will learn the basics of Flexbox, its important properties, and how to use it to create responsive layouts.

What is Flexbox in CSS?

Flexbox is a one-dimensional CSS layout model. It allows elements inside a container to be arranged along a main axis and aligned along a cross axis.

A Flexbox layout consists of:

• Flex Container: The parent element with display: flex.
• Flex Items: The direct children of the flex container.

For example:

.container {
    display: flex;
}

The direct child elements of .container become flex items.

Flexbox Axes

Flexbox works with two axes:

• Main Axis: The direction in which flex items are arranged.
• Cross Axis: The direction perpendicular to the main axis.

By default, Flexbox arranges items horizontally from left to right.

Flex Container

A flex container can be created using the display property.

Example 1: Creating a Flex Container

This example creates a basic Flexbox container and places its child elements in a row.

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
.container {
    display: flex;
}

1. The flex-direction Property

The flex-direction property specifies the direction of the main axis.

The main values are:

• row
• row-reverse
• column
• column-reverse

Example

This example arranges the flex items vertically using flex-direction: column.

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

2. The flex-wrap Property

The flex-wrap property determines whether flex items should remain on one line or move to additional lines.

The main values are:

• nowrap
• wrap
• wrap-reverse

Example

This example allows flex items to move to another line when there is not enough available space.

.container {
    display: flex;
    flex-wrap: wrap;
}

3. The flex-flow Property

The flex-flow property is a shorthand for flex-direction and flex-wrap.

Example

This example arranges items in a row and allows them to wrap onto additional lines.

.container {
    display: flex;
    flex-flow: row wrap;
}

4. The justify-content Property

The justify-content property controls the alignment of flex items along the main axis.

Common values include:

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

Example

This example centers the flex items along the main axis.

.container {
    display: flex;
    justify-content: center;
}

5. The align-items Property

The align-items property controls the alignment of flex items along the cross axis.

Common values include:

• stretch
• flex-start
• flex-end
• center
• baseline

Example

This example centers the items along the cross axis.

.container {
    display: flex;
    align-items: center;
    height: 200px;
}

Example: Centering an Element with Flexbox

Flexbox makes it easy to center an element horizontally and vertically.

This example centers the content in both directions using justify-content and align-items.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

6. The align-content Property

The align-content property controls the alignment of multiple flex lines along the cross axis. It is useful when flex items wrap onto multiple lines.

Example

This example centers multiple rows of flex items within the container.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 400px;
}

7. The gap Property

The gap property specifies the space between flex items.

Example

This example adds 20px of space between the flex items.

.container {
    display: flex;
    gap: 20px;
}

Flex Item Properties

Flexbox also provides properties that can be applied directly to individual flex items:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1. The order Property

The order property changes the visual order of flex items.

The default value is 0.

Example

This example moves the second item before the other items.

.item2 {
    order: -1;
}

2. The flex-grow Property

The flex-grow property determines how much a flex item can grow when extra space is available.

Example

This example allows the second item to receive twice as much extra space as the first item.

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

3. The flex-shrink Property

The flex-shrink property determines how much a flex item can shrink when there is not enough space.

Example

This example prevents the second item from shrinking.

.item1 {
    flex-shrink: 1;
}

.item2 {
    flex-shrink: 0;
}

4. The flex-basis Property

The flex-basis property specifies the initial size of a flex item along the main axis.

Example

This example gives the flex item an initial main size of 200px.

.item {
    flex-basis: 200px;
}

5. The flex Property

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

Example

This example sets the grow factor, shrink factor, and initial size of the flex item.

.item {
    flex: 1 1 200px;
}

6. The align-self Property

The align-self property allows an individual flex item to have a different cross-axis alignment from the other items.

Example

This example aligns one item at the start while other items can follow the container's alignment.

.container {
    display: flex;
    align-items: center;
}

.item {
    align-self: flex-start;
}

Responsive Layout with Flexbox

Flexbox can be used to create layouts that adjust when the available space changes.

Example

This example creates flexible cards that can wrap onto additional rows on smaller screens.

<div class="cards">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 250px;
    padding: 20px;
    border: 1px solid #ccc;
}

Flexbox Navigation Bar

Flexbox is commonly used to arrange navigation links horizontally.

Example

This example distributes navigation links across the available space.

<nav class="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

margin: auto in Flexbox

An auto margin can be used to push a flex item toward the opposite side of the container.

Example

This example pushes the second item to the right side of the flex container.

<div class="container">
    <div>Logo</div>
    <div class="login">Login</div>
</div>
.container {
    display: flex;
}

.login {
    margin-left: auto;
}

Difference Between justify-content and align-items

Both properties control alignment, but they work on different axes.

Flexbox vs CSS Grid

Flexbox and CSS Grid are both CSS layout systems, but they are intended for different layout requirements.

Flexbox is generally useful when the layout follows one primary direction, while Grid is more suitable when both rows and columns need to be controlled.