Henrietta Okechukwu O (Hariet)

Posted on Nov 24, 2023 • Edited on Nov 29, 2023

Mastering Flexbox Basics: A Comprehensive Guide

#flexbox #programming #webdev #beginners

Have you ever encountered alignment challenges or want to get better at aligning content as a developer?
Those days of using floats, positioning, and complicated calculations to align content were truly frustrating.

But don't worry because Flexbox is here. This game-changing tool allows developers to effortlessly create complex and responsive web layouts.

In this article, we will explore the foundations of Flexbox, diving into its essential concepts and properties. Prepare yourself to revolutionize your web design skills with Flexbox!

What is Flexbox?

Flexbox also referred to as Flexible Box Layout, is an incredible CSS layout model that was introduced in CSS3. It empowers web designers to create flexible and responsive layouts for web pages. This layout model operates in a single direction, either vertically (from left to right) or horizontally (from top to bottom), making it a one-dimensional layout model.

One of the key benefits of Flexbox is its efficiency in arranging, aligning, and distributing elements within a container. By utilizing Flexbox, web interfaces can be built with ease, ensuring that they automatically adapt to different screen sizes and devices.

Concepts of Flexbox

When it comes to understanding and utilizing Flexbox, there are a few key concepts to keep in mind.

They are:

Flex Container

Flex items

Axes

Flex Container
The Flex Container, also known as the parent container, is where the Flex items are housed. In other words, the Flex items are contained inside the Flex container, which can be considered as the parent. The Flex container can have one or more Flex items as the children.
Flex Items
The Flex items, also known as the child or children, are the elements that are contained inside the Flex container. These Flex items can be arranged either horizontally (along the row axis) or vertically (along the column axis). By default, they are displayed in a single row.

Before transforming a container into a Flexbox, you need to set the display property to either flex or inline-flex, depending on your desired design. This allows the parent container to become a Flex container and enables the Flexbox functionality.

Example: Code illustrating the syntax for flexibility of flexbox

.flex-container
{
display: flex;
/_or you can set the value to inline_/
display: inline;
}

It's important to note that Flexbox operates on items that are directly inside a container. Therefore, it's crucial to properly structure your HTML markup to ensure the correct implementation of Flexbox.

Below are code illustrations describing Flex containers and Flex items.

Code html

<html>
    <div class="flex-container">
        <div class="flex-item box-1">Box 1</div>
        <div class="flex-item box-2">Box 2</div>
        <div class="flex-item box-3">Box 3</div>
    </div>
</html>

code css

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

.flex-container {
    border: 8px solid purple;
    display: flex;
    background-color: black;
    height: 300px;
}

.flex-item {
    height: 100px;
    width: 100px;
    color: #2b0606;
    font-size: 2rem;
    margin: 4rem;
    padding: 2rem;
    text-align: center;
    font-weight: bold;
}

.box-1 {
    background-color: greenyellow;
}
.box-2 {
    background-color: blueviolet;
}
.box-3 {
    background-color: grey;
}

The Output

NB: You can style the CSS depending on how you want your output to look.
The border, background color, and other properties on the code source above are included for better illustration.

The axes The axes consist of the main axis and the cross axis.

Main axis The main axis is a horizontal line that extends from left to right. The starting point on this axis is referred to as the main start, while the ending point is known as the main end. The measurement of this axis is referred to as the main size.

The direction in which the main axis runs is determined by the property flex-direction, which can be set to either a row or column.

Cross axis The cross-axis is perpendicular to the main axis. The starting point on this axis is called the cross start, and the ending point is known as the cross end. The length of this axis is referred to as the cross size.

Image illustrating the main axis and the cross axis

Flexbox Properties

Flexbox properties are essential for governing the behavior of flex items within a flex container.

These properties can be divided into two groups:

container properties

flex item properties

Container Properties
Container properties include flex-direction, flex-wrap, flex-flow, justify-content, flex-grow, flex-shrink, and align-items.
These properties control how flex items are arranged and aligned within the flex container.
Flex Item Properties
Flex item properties include order, flex, flex-grow, flex-shrink, and align-self.
These properties dictate the individual behavior of each flex item within the container, such as their order, flexibility, and alignment.

Let's explain container properties

1. Flex-Direction

Flex direction property determines the main axis and its direction, which in turn determines whether the flex items are positioned in a row or column inside the container.

The possible values for this property are:

flex direction-row : By default, the main axis of Flexbox runs from left to right.

.flex-container {
    flex-direction: row;
}

Output

Flex direction column : By setting the flex-direction property to the column, you can change the direction of the main axis to vertical.

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

Output

flex-direction row-reverse: This property value reverses the order of the flex items in a row.

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

Output

reverse column This property value reverses the order of the flex items in a column.

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

Output

Flex wrap

Flex containers can have multiple lines of items if space is limited.
The flex-wrap property controls whether the items should wrap onto new lines or stay on a single line. Its values include nowrap, wrap, or wrap-reverse.

flex-wrap: nowrap This is the default value and ensures that the flex items stay on a single line, even if it causes overflow.

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

output

flex-wrap: wrap By setting the flex-wrap property to wrap, the flex items are allowed to wrap onto new lines when necessary.

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

Output

flex-wrap: wrap-reverse This property value wraps the flex items onto new lines but in reverse order.

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

Output

Flex Flow

Flex-flow is a combination of the flex-direction and flex-wrap properties, allowing you to specify both the main axis and the wrapping behavior in a single property.

flex-flow: column nowrap

Output

Justify Content

The justify-content property controls how the flex items are spaced along the main axis of the flex container. It allows for spacing between items and redistribution of extra space.

Here are various values for the justify-content property:

flex start This aligns the items at the start of the main axis.

.flex-container {
    justify-content: flex-start;
}

Output

flex end This aligns the items at the end of the main axis.

.flex-container {
    justify-content: flex-end;
}

Output

Center It centers the items along the main axis.

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

Output

You can also set the flex-direction to the column and play around justify content.
Example:

.flex-container {
    flex-direction: column;
    justify-content: center;
}

Space Between

This distributes the items evenly along the main axis

Code

.flex-container {
    justify-content: space-between;
}

Output

Space around Distribute the items evenly along the main axis

.flex-container {
    justify-content: space-around;
}

Output

space evenly Distribute the items evenly along the main axis, including space before the first item and after the last item.

Code

.flex-container {
    justify-content: space-evenly;
}

Output

Align-Items

The align-items property controls how the flex items are spaced along the cross-axis of the flex container.

Here are the different values for align-items:

flex-start This aligns the items at the start of the cross-axis. This is the default value. Just like justify content.

.flex-container {
    align-items: flex-start;
}

center value Centers the items along the cross-axis.

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

Output

Baseline Align the items such that their baselines are aligned.

.flex-container {
    align-items: baseline;
}

Output

Stretch Stretches the items to fit the height of the container. You can set the height property to notice the effect.

.flex-container {
    display: flex;
    height: 500px;
    align-items: stretch;
}

End Align the items at the end of the cross-axis.

.flex-container {
    align-items: end;
}

Output

You can also play around with justify content and align items' property together.

Example

.flex-container {
    justify-content: space-around;
    align-items: flex-end;
}

Align Content

The align-content property is similar to align-items, but it applies to the container itself instead of the individual items. This can be useful if you want to align the container relative to the page or another container.

Note that you need to have a height set and enable wrapping for the property to work properly.

Let's demonstrate using align content with the value center, you can also apply other values as well.

.container {
    flex-wrap: wrap;
    align-content: center;
}

Output

Let's discuss the properties of flex items.

When applying flex item property you can either target the whole item or individual item depending on your preference.

Order The order property controls and specifies the visual order in which flex items are displayed within a flex container.

It does not affect the order in the HTML markup.
By assigning different order values to flex items, you can rearrange their display order.

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

.flex-container {
    border: 4px solid purple;
    display: flex;
    background-color: black;
    height: 200px;
}

.flex-item {
    color: #2b0606;
    font-size: 2rem;
    padding: 2rem;
    text-align: center;
    font-weight: bold;
}

.box-1 {
    background-color: greenyellow;
    order: 1;
}
.box-2 {
    background-color: blueviolet;
    order: 1;
}
.box-3 {
    background-color: grey;
}
.box-4 {
    background-color: codetblue;
    order: 1;
}
.box-5 {
    background-color: chocolate;
}
.box-6 {
    background-color: goldenrod;
}

The output when you set the order property to 1 on item 2

The output when you set the order property to 1 on items 2 and 4

Flex grow

The flex-grow property determines how much an item can grow or stretch to fill the available space in a flex container.
A value of 1 means the item can grow to fill the available space, while a value of 0 means it will not grow at all.
You can also use fractional values, like "0.5", which means the item will grow half as much as other items or you can set it to the value of your choice.

Before applying Flex grow

After applying flex-grow
Example 1:

.box-1 {
    background-color: greenyellow;
}
.box-2 {
    background-color: blueviolet;
    flex-grow: 2;
}
.box-3 {
    background-color: grey;
}
.box-4 {
    background-color: codetblue;
}
.box-5 {
    background-color: chocolate;
}
.box-6 {
    background-color: goldenrod;
}

Output

Example 2:

.box-1 {
    background-color: greenyellow;
}
.box-2 {
    background-color: blueviolet;
    flex-grow: 1;
}
.box-3 {
    background-color: grey;
    flex-grow: 1;
}
.box-4 {
    background-color: codetblue;
}
.box-5 {
    background-color: chocolate;
}
.box-6 {
    background-color: goldenrod;
}

Output

You can set it evenly by targeting the flex item

Example 3:

.flex-item {
    color: #2b0606;
    font-size: 2rem;
    padding: 2rem;
    text-align: center;
    font-weight: bold;
}
.box-1 {
    background-color: greenyellow;
    order: 1;
}
.box-2 {
    background-color: blueviolet;
}
.box-3 {
    background-color: grey;
}
.box-4 {
    background-color: codetblue;
}
.box-5 {
    background-color: chocolate;
}
.box-6 {
    background-color: goldenrod;
}

Output

Flex shrink

This is the opposite of "flex-grow".
It determines how much an item can "shrink" to fit the available space.
A value of "1" means that the item can shrink to fit the space, so 1 is the default value.
A value of "0" means that it will not shrink at all. You can also use fractional values, like "0.5", to control the amount of shrinkage.

After applying the flex-shrink property, try resizing the browser to notice the effect.

If you don't want the items to shrink then apply the code below to the whole item

.flex-container {
    display: flex;
}
.flex-item {
    flex-shrink: 0;
}

Flex basis

The flex-basis property defines the initial size of a flex item before any remaining space is distributed. It can be specified in pixels (px), percentages (%), or with the value of "auto".

By default, flex items have a flex-basis of "auto", meaning their size is based on their content.

The output below is a flex-basis property with a value of 200px applied to the item on Box 2.

.flex-item {/*properties here*/}

.box-3 {
flex-basis:200px}

Align self

This property allows an individual flex item to override the alignment specified by the flex container's align-items property. It takes values such as flex-start, flex-end, center, baseline, or stretch.

.flex-item {
    color: #2b0606;
    font-size: 2rem;
    padding: 2rem;
    text-align: center;
    font-weight: bold;
    flex-grow: 1;
}
.box-1 {
    background-color: greenyellow;
    order: 1;
}
.box-2 {
    background-color: blueviolet;
    align-self: flex-start;
}
.box-3 {
    background-color: grey;
}
.box-4 {
    background-color: codetblue;
    align-self: flex-end;
}
.box-5 {
    background-color: chocolate;
}
.box-6 {
    background-color: goldenrod;
    align-self: flex-center;
}

align-self: flex-start
align-self: flex-end;
align-self: flex-center;

Flex

The flex property is a shorthand property that combines the flex-grow, flex-shrink, and flex-basis properties in one declaration. It is commonly used to set the flex properties of flex items.

.flex-container {
    display: flex;
}
.flex-item {
    flex: 1 0 100px;
}

Using the shorthand declaration above is equivalent to the following individual declarations below:

.flex-item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Conclusion

Understanding the basics of Flexbox is essential for creating modern, responsive web layouts.

By mastering the concepts of flex containers, flex items, the main and cross axes, and the various Flexbox properties, you will have the skills to design flexible and dynamic web UIs that adapt flawlessly to different devices and screen sizes.

So, embrace Flexbox and explore its vast possibilities for crafting stunning web interfaces.

Top comments (2)

Chinwendu Evans • Nov 24 '23

Thank you for this article

Henrietta Okechukwu O (Hariet) • Nov 24 '23

You are welcome.

Glad you loved it.
👍🏽

DEV Community

Mastering Flexbox Basics: A Comprehensive Guide

What is Flexbox?

Concepts of Flexbox

Flexbox Properties

Let's explain container properties

1. Flex-Direction

Flex wrap

Flex Flow

Justify Content

Align-Items

Align Content

Let's discuss the properties of flex items.

Flex grow

Flex shrink

Flex basis

Align self

Flex

Conclusion

Top comments (2)

Read next

Day 2: Leetcode

Do we need Promise.allSettled()?

Enhancing two-way data binding in Angular

SVAR Gantt: New Open Source, Interactive Gantt Chart for React