Flexbox is an excellent method to handle page layouts in CSS. It can manipulate the height and width of an item to occupy all the space within the parent container ("flex-container") and control the vertical and horizontal flow of each child ("flex-items").

If you're new to flexbox, you’ll learn everything that you need to get started right away. We’ll get down to basics and discuss the most used flexbox properties with proper examples.

What Is CSS Flexbox?

Unlike traditional layouts (block layout, inline layout, table layout, and positioned layout), Flexbox is an optimized box model for designing complex user interface layouts. It's true that CSS is used to style elements but, CSS Flexbox brings efficient solutions to the table when it comes to building responsive and fluid layouts, aligning elements, and directing and reordering elements without altering the HTML.

In other words, using CSS flexbox, the elements are ‘flexible’ and can be resized and positioned optimally to develop a modern responsive design.

Basic Flexbox Concept and Terminology

Flex-container and flex-item are the basic components in the flexbox layout. You can consider flex-container as a parent element on a page that contains children known as flex-items. The main idea behind the flex layout is that all the flex-items inside the flex-container are either laid out along the main axis or the cross axis as shown below:

main axis: If flex-items are aligned in a row, the main axis will be along the row. On the other hand, if the flex-items are aligned in a column, the main axis will be aligned along the column. In a nutshell, flex-direction determines the main axis.

cross-axis: It's perpendicular to the main axis. In other words, if flex-direction is row or row-reverse, the main axis will run along the flex container's width, and therefore the cross axis will run along with the height of the flex container. On the other hand, if flex-direction is column or column-reverse, the main axis will run along with the flex container's height, and thus, the cross-axis will run along the width of the flex-container.

Flexbox Properties for the Flex Container

The display property:

The first thing that you have to do is to set the display property to flex. This defines a flex container. Other values for different layouts can be inline, block, and inline-block. By saving display: flex; you're enabling a flex context for all the flex-items.

The flex-direction property:

It's used to customize the main axis orientation inside the flex-container. Therefore, it's a defining property in which the direction of the flex-items is set. The values can be row (default), row-reverse, column, and column-reverse.

The flex-wrap property:

If you try to increase the number of flex-items inside the flex-container, they'll all try to fit onto one line by default. You can change this by setting the flex-wrap property to wrap the items into multiple lines inside the parent container. It accepts three values: nowrap (default), wrap, and wrap-reverse.

The flex-flow property:

Now you know the flex container’s main and cross axes. The flex-flow property combines the two axes into one as it's a shorthand for flex-direction and flex-wrap properties. Therefore, the default value is row nowrap, and you're free to experiment further.

The justify-content property:

The justify-content property is used to align child items in a parent flex-container. All the content is aligned based on the main axis. But if we specify a certain height or width to these items, justify-content will behave differently. The key point is to have enough space inside the parent container before testing justify-content and align-items properties.

The justify-content property makes alignment in five different ways:

        justify-content: flex-start;
    

This is the default value. All the items are aligned at the start of the parent container, i.e., at the top-left of the parent container.

        justify-content: center;
    

All items are packed in at the center of the parent container.

        justify-content: flex-end;
    

All items are moved to the end line of the parent container.

        justify-content: space-between;
    

All the items are evenly distributed in the line, with the first item at the start and the last item at the end.

        justify-content: space-around;
    

All items have equal space on the left and right sides. Note that the first and the last item will have one unit of space against the container edge, but two units of space between the neighboring flex-item.

The align-items property:

Align items is similar to justify-content with a small difference. Here, all the items are aligned based on the cross-axis (perpendicular to the main axis).

align-items accepts five different values:

        align-items: stretch;
    

This is the default value. All items stretch to fill the container.

        align-items: flex-start;
    

All items are packed at the start of the container (cross-axis).

        align-items: center;
    

All items are packed to the center of the flex-container in the cross axis.

        align-items: flex-end;
    

All the items are packed to the end of the container (cross-axis).

        align-items: baseline;
    

All the items are aligned in such a way that their baselines (texts) are aligned.

The align-content property:

Make sure that the flex-container has items in multiple lines, and the flex-wrap property is set to either wrap or wrap-reverse to witness the align-content property. It’s necessary because as the justify-content property aligns flex-items within the main axis, the align-content property aligns those lines in the cross-axis (when there's some extra space).

Flexbox Properties for Flex Items

The align-self property:

It allows you to adjust the alignment of an individual flex-item. It possesses all the properties of align-items as we set in the flex-container. You can use it to change the position of a single flex-item without disturbing the other neighboring items. It accepts six values: auto, flex-start, flex-end, center, baseline, stretch.

The order property:

Using the order property, you can control the order of flex items appearing in a flex-container by giving individual items a higher or lower order. By default, all the items are laid out in the source order.

The flex-grow property:

It defines the spatial distribution of flex-items inside the flex-container. For instance, items with the flex-grow property set to "2" will try to take up twice the available space as the others. Note that it doesn’t accept negative values.

The flex-shrink property:

By default, it's set to 1. You can make the flex-item shrink if required.

The flex-basis property:

When you want to size flex-items, particularly with width, you don't usually use the width property, but instead, flex-basis. By default, it's set to auto.

The flex property:

It's shorthand for flex-grow, flex-shrink, and flex-basis properties, where the last two properties are optional. It means if you set the flex property to "1", then flex-grow will be set to one while flex-shrink and flex-basis will have the default value. It's recommended to use this shorthand property rather than take up space with all those individual properties.

CSS: Design Your Site With Style

We know there’s a lot to take in, and we're sure you're ready to dive into using Flexbox in your own projects. But we're just scratching the surface of what Flexbox can do!

CSS is everywhere. From setting your site's background image to designing layouts with CSS flexbox, it has revolutionized the way we manage the web. All of these vital properties will be very useful in your web development journey. You can even apply what you learned in this article to get started creating awesome responsive layouts. Happy coding!