The Complete Guide to CSS Flexbox

Everything you need to know to lay out your page with Flexbox

Photo by Olga O on Unsplash.

CSS flexbox is a one-dimensional layout pattern that makes it easy to design flexible and effective layouts. Divide space between items and control their alignment in a given container flex layout. It also provides a lot of flexibility. With flexbox, we can organize items from left to right, top to bottom, and at the same time control the spacing and order of the items in the container.

How Does It Work?

In flexbox, there are mainly two entities: a parent container (the flex container) and the immediate children elements (flex items).

We also have to deal with the axes: the main axis and the cors axis. By default, the main axis runs left to right, whereas the cors axis is perpendicular to the main axis and runs top to bottom.

Parent Container Properties

These are some of the properties that can be applied to a flex parent container:

• display
• flex-direction
• flex-wrap
• flex-flow
• justified-content
• align-items
• align-content

Without Flexbox

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
</div>

Output

display

First, we have the display property. This is what defines the flex container and it’s mandatory when working with Flexbox.

Output

flex-direction

Next is flex-direction, which defines the direction in which the flex items are placed in the container. Changing the value of the flex-direction property allows us to change how the items. flex-direction can accept one of four values:

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

flex-direction: row

the first value is a row that is the default value of flex-direction. It doesn’t make any changes by default. It’s placed on the main axis from left to the right.

Output

flex-direction: row-reverse

This sets the main access direction from right to left, which results in the flex items being placed from right to left. In the example below, you can see that the items are now placed in the reverse order. Item 1 is placed to the right:

Output

flex-direction: column

When you set flex-direction to column, the main axis goes from top to bottom, so the items are now stacked on top of each other:

Output

flex-direction: column-reverse

We also have column-reverse, which stacks the items in the reverse order. Look at the example below. You can see Item 1 is at the bottom and Item 3 is at the top:

Output

flex-wrap

flex-wrap is used to control the wrapping of items within a container. If we reduce the browser width, we lose some items for the browser width. The behavior changes with the flex-wrap property. It can accept three possible values:

• nowrap (default value)
• wrap
• wrap-reverse

flex-wrap: nowrap

This is the flex-wrap property default value. If you set the property value to nowrap, there are no changes.

Output

flex-wrap: wrap

When you set the flex-wrap property to wrap, you reduce the browser width that the items have wrapped in the container:

Output

flex-wrap: wrap-reverse

Instead of items falling into the row below, they climb into the row above. Wrapping always occurs from the last item. wrap-reverse pushes the last item above instead of below:

output

flex-flow

flex-flow is shorthand for the combination of flex-direction and flex-wrap. In flex-flow, firstValue is for flex-direction and secondValue is for flex-wrap.

Output

justified-content

justified-content defines the alignment of the items along the main axis. There are six possible values for the justified-content property:

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

justified-content: flex-start

Setting the value to flex-start places the flex items at the beginning of the main axis, which is also known as the main start. flex-start is the default value in this property.

Output

justified-content: flex-end

This aligns the items to be placed at the end of the main axis:

Output

justified-content: center

The center value aligns all content at the center of the main axis:

Output

justified-content: space-between

This value helps to evenly split extra space and add it in between the flex items:

Output

justified-content: space-around

This value splits the extra space at the beginning and the end. The space in question is equal to half of the space between the flex items:

Output

justified-content: space-evenly

This value distributes the extra space in the container:

Output

align-items

The align-items property defines how the flex items are laid out along the cross axis.

• align-items: stretch
• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: baseline

align-items: stretch

The items stretch the entire length of the cross axis and stretch is the default value:

align-items: flex-start

This is the starting point of the cross axis. The cross axis flows from top to bottom. The item doesn’t stretch and is aligned with the cross start of the line:

align-items: flex-end

This value pushes the items to the end of the cross axis:

align-items: center

This centers the content along the cross axis:

align-items: baseline

The baseline is the line upon which most letters sit. The item itself is positioned based where the text will sit:

align-content

align-content is similar to justify-content with the difference being this will align along the cross axis instead of the main axis. Also, align-content works only when there are multiple rows of flex items in the container. The container must have a height and also wrapping.

• align-content: stretch
• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around

align-content: stretch

This is the align-content default value. It has no effect on alignment.

align-content: flex-start

This value pulls the lines to the beginning of the cross axis:

align-content: flex-end

This value pushes the lines to the end of the cross axis:

align-content: center

This value pushes the lines to the center of the cross axis:

align-content: space-between

This value takes all the extra space and puts it in between the lines:

align-content: space-around

This distributes the space around the lines:

Flex Item Properties

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

order

The order property manages the order in which the item arrives in the flex container. All item defaults have an order of zero:

flex-grow

flex-grow allows a flex item to grow if necessary. This property specifies what amount of space inside the flex container the item should take up if necessary. All flex items have a flex-grow of zero.

Output

flex-shrink

flex-shrink defines the capacity for a flex item to shrink if necessary. The default value of flex-shrink is one.

flex-basis

flex-basis specifies the initial main size of a flex item before the extra space in the container is distributed:

flex

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

align-self

The align-self property allows the alignment of individual flex items:

Conclusion

Thanks for reading.

If interested, you can view more resources on YouTube and also play the Flexbox Froggy game.