CSS Flexbox

The flexbox layout model in CSS provides a powerful way to arrange and align items within a container. Flexbox makes it easy to design responsive layouts and align items within a container in various directions and orders.

Basics of Flexbox

Flexbox consists of a flex container and flex items. The container uses the display: flex; property, while the items within it are the flex items. Here are the main properties used in Flexbox:

Display: Flex

To create a flex container, set the display property to flex or inline-flex.

        
            .flex-container {
    display: flex;
    background-color: lightgray;
}
.flex-item {
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
}
        
    

In this example, the container becomes a flex container, and its children are arranged as flex items.

Flex Direction

The flex-direction property defines the direction in which flex items are placed in the flex container. It can be set to the following values:

• row (default) - Items are placed in a row, from left to right.
• row-reverse - Items are placed in a row, from right to left.
• column - Items are placed in a column, from top to bottom.
• column-reverse - Items are placed in a column, from bottom to top.

        
            .flex-direction-row {
    display: flex;
    flex-direction: row;
    background-color: lightgray;
}
.flex-direction-column {
    display: flex;
    flex-direction: column;
    background-color: lightgray;
}
.flex-item {
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
}
        
    

This example demonstrates how different values of flex-direction affect the layout of flex items.

Justify Content

The justify-content property aligns flex items along the main axis of the flex container. It can take the following values:

• flex-start (default) - Items are aligned at the start of the container.
• flex-end - Items are aligned at the end of the container.
• center - Items are centered along the main axis.
• space-between - Items are evenly distributed, with the first item at the start and the last item at the end.
• space-around - Items are evenly distributed, with equal space around each item.

        
            .justify-content-start {
    display: flex;
    justify-content: flex-start;
    background-color: lightgray;
}
.justify-content-center {
    display: flex;
    justify-content: center;
    background-color: lightgray;
}
.justify-content-end {
    display: flex;
    justify-content: flex-end;
    background-color: lightgray;
}
.justify-content-space-between {
    display: flex;
    justify-content: space-between;
    background-color: lightgray;
}
.justify-content-space-around {
    display: flex;
    justify-content: space-around;
    background-color: lightgray;
}
.flex-item {
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
}
        
    

This example shows how justify-content affects the alignment of flex items along the main axis.

Align Items

The align-items property aligns flex items along the cross axis of the flex container. It can take the following values:

• stretch (default) - Items stretch to fill the container.
• flex-start - Items are aligned at the start of the container.
• flex-end - Items are aligned at the end of the container.
• center - Items are centered along the cross axis.
• baseline - Items are aligned along their baselines.

        
            .align-items-flex-start {
    display: flex;
    align-items: flex-start;
    background-color: floralwhite;
    width: 600px;
    height: 600px;
}
.align-items-center {
    display: flex;
    align-items: center;
    background-color: lightgray;
    width: 600px;
    height: 600px;
}
.align-items-flex-end {
    display: flex;
    align-items: flex-end;
    background-color: honeydew;
    width: 600px;
    height: 600px;
}
.align-items-stretch {
    display: flex;
    align-items: stretch;
    background-color: lightgray;
    width: 600px;
    height: 600px;
}
.flex-item {
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
    height: 100px;
}
        
    

This example illustrates the different alignments achievable with align-items.

Align Self

The align-self property allows individual flex items to be aligned independently of other flex items within the same container. It can take the same values as align-items.

        
            .flex-container {
    display: flex;
    background-color: lightgray;
    width: 600px;
    height: 600px;
}
.align-self-flex-start {
    align-self: flex-start;
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
    height: 100px;
}
.align-self-center {
    align-self: center;
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
    width: 100px;
    height: 100px;
}
.align-self-flex-end {
    align-self: flex-end;
    background-color: lightgreen;
    padding: 10px;
    margin: 5px;
    width: 100px;
    height: 100px;
}
        
    

In this example, each flex item is aligned independently using the align-self property.

Flex Wrap

The flex-wrap property specifies whether flex items should wrap or not when they overflow the container. It can be set to the following values:

• nowrap (default) - Items are not wrapped and stay on a single line.
• wrap - Items wrap onto multiple lines from top to bottom.
• wrap-reverse - Items wrap onto multiple lines from bottom to top.

        
            .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    background-color: lightgray;
}
.flex-wrap-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: lightgray;
}
.flex-item {
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
}
        
    

This example demonstrates how flex items behave with different flex-wrap values.

Flex Grow, Shrink, and Basis

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. These properties control how flex items grow, shrink, and are initially sized within the flex container.

• flex-grow - Specifies how much a flex item should grow relative to the rest of the flex items.
• flex-shrink - Specifies how much a flex item should shrink relative to the rest of the flex items.
• flex-basis - Specifies the initial size of a flex item before any growing or shrinking occurs.

        
            .flex-grow {
    display: flex;
    background-color: lightgray;
}
.flex-grow-1 {
    flex-grow: 1;
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 100px;
}
.flex-grow-2 {
    flex-grow: 2;
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
    width: 100px;
}
.flex-shrink {
    display: flex;
    background-color: lightgray;
}
.flex-shrink-1 {
    flex-shrink: 1;
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
    width: 200px;
}
.flex-shrink-2 {
    flex-shrink: 2;
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
    width: 200px;
}
.flex-basis {
    display: flex;
    background-color: lightgray;
}
.flex-basis-100 {
    flex-basis: 100px;
    background-color: lightcoral;
    padding: 10px;
    margin: 5px;
}
.flex-basis-200 {
    flex-basis: 200px;
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
}
        
    

This example shows how flex-grow, flex-shrink, and flex-basis affect the size and behavior of flex items.

Practical Tips and Notes

• Responsive Design: Flexbox is excellent for creating responsive layouts. It allows items to adjust and align based on the available space.
• Centering Elements: Flexbox makes it easy to center elements both horizontally and vertically. Use justify-content: center; and align-items: center; for centering.
• Order Property: You can change the order of flex items using the order property. This does not affect the source order but changes the visual order.
• Fallback for Older Browsers: While Flexbox is widely supported, consider using fallback CSS for older browsers that may not fully support Flexbox.

Summary

CSS Flexbox is a powerful tool for creating flexible and responsive layouts. By understanding and using Flexbox properties, you can control the alignment, direction, and order of items within a container. This tutorial provides a comprehensive guide to Flexbox, making it easy for beginners to learn and apply Flexbox concepts.