A Friendly Introduction to Flexbox for Beginners

Key Takeaways

Flexbox is a CSS layout tool ideal for one-dimensional layouts, such as a string of similar items, and can be used as a fallback for Grid layouts in older browsers.
Flexbox allows for easy layout adjustments in any direction, visual order rearrangement, responsive size adjustments, and equal-column layouts irrespective of content volume.
The ‘flex’ value of the ‘display’ property is the core element of flexbox, turning container elements into flex items, which are placed side by side by default and adapt to the available space.
Flexbox properties like ‘order’, ‘align-items’, ‘align-self’, ‘justify-content’, and ‘flex’ offer flexibility in changing the order of elements, aligning items both horizontally and vertically, distributing available space evenly among elements, and controlling the length of elements in relation to others in a flex container.

In recent years, CSS layout has come of age, with dedicated tools for complex layouts replacing the various workarounds of using tables, floating, absolute positioning and so on. Flexbox (or the Flexible Box Layout Module) was the first of these dedicated layout modules, followed by CSS Grid Layout. In this article, we provide a user-friendly introduction to flexbox.

With the introduction of CSS Grid Layouts, you may be asking if flexbox is needed at all. While there is some overlap in what they can do, they each have very specific purposes and roles within CSS layout. As a very general rule, the sweet spot for flexbox is layout in one dimension (say, a string of similar items), while Grid is ideal for layout in two dimensions (such as the elements of a whole page).

That said, flexbox can be used for full-page layouts. Both flexbox and Grid are now supported in all current major browsers (MDN marks both as widely available), so the choice between them is about the shape of your layout, not browser support. They also work well together: use Grid for the overall page and flexbox for the rows and groups of items inside it.

Advantages of Using Flexbox

Some of the advantages of flexbox are:

page content can be laid out in any direction (to the left, to the right, downwards or even upwards)
bits of content can have their visual order reversed or rearranged
items can “flex” their sizes to respond to the available space and can be aligned with respect to their container or each other
achieving equal-column layouts (irrespective of the amount of content inside each column) is a breeze.

To illustrate the various properties and possibilities, let’s assume the following simple layout for some of the demos in this article:





  

    header content here

  


  

    

      nav content here

    


    

      main content here

    


    

      aside content here

    


  


  

    footer content here

The first step is to place the elements within .main, i.e.,

and

, side by side. Without flexbox, we’d probably float all the three elements, but making it work as desired wouldn’t be very straightforward. Moreover, the traditional way of doing things would present a well-known problem: every column is just as high as its content. As a consequence, you would need to set an equal height for all three columns to have the same length, or use some sort of hack.

Enter flexbox to the rescue.

Let’s Flex

The core element of flexbox is the flex value of the display property, which needs to be set for the container element. Doing so turns its children into “flex items”. These items acquire some handy properties by default. For example, they get placed side by side, and elements without a specified width automatically take up the remaining space.

So, if you set display: flex for .main, its .content child element is automatically squeezed in between

and

. No more calculations, how handy is that? As a special bonus, all of these three elements magically have the same height.



.main {

  display: flex;

}

Check out the demo below for all the details:

See the Pen Flexbox Tutorial: Display Property by SitePoint (@SitePoint) on CodePen.

The Order of Things: Flexbox `order` Property

Another property of flexbox is the ability to easily change the order of elements. Let’s assume you’ve built the above layout for a client and she now wants .content to come before

Normally, you’d dive into the HTML source code and change the order there. With flexbox you can accomplish the task entirely with CSS. Just set the order property of .content to -1 and the content column will come first.



.main {

  display: flex;

}
.content {

  order: -1;

}

In this case you don’t need to state the order for the other columns:

See the Pen Flexbox Tutorial: Order Property by SitePoint (@SitePoint) on CodePen.

If you prefer to specify the value of the order property explicitly for each column instead, you can go ahead and set order to 1 for .content, to 2 for

and to 3 for

HTML Source Code Independent from CSS Styles with Flexbox

But your client isn’t satisfied yet. She’d like the

to be the first element on the page, even before the

. Well, once again, flexbox is your friend (although in cases like this one, perhaps it would be better to educate your client rather than follow suit). Since you need to rearrange not only the inner elements but also the outer one, the display: flex rule will have to be set for

. Notice how you can nest flex containers in your web page to achieve the result you’re after.

Because

, and

are stacked on top of each other, you need to set a vertical context first, which you can quickly do with flex-direction: column. Additionally, the

gets the order value of -1 so that it will appear first on the page. It’s as easy as that.



.example {

  display: flex;

  flex-direction: column;

}
footer {

  order: -1;

}

So, if you ever want to change a row of elements into a column or vice versa, you can use the flex-direction property and set it to column or row accordingly (row is the default value):

See the Pen Flexbox Tutorial: flex-direction by SitePoint (@SitePoint) on CodePen.

However, with great power comes great responsibility: keep in mind that a number of visitors will be using the keyboard to navigate your flexbox-based websites, therefore if the order of elements in the HTML source is at odds with what appears on the screen, accessibility could become a serious concern. To learn more on this, don’t miss HTML Source Order vs CSS Display Order, an in-depth treatment of exactly this problem by accessibility and usability expert Adrian Roselli.

How to Align Items with Flexbox

Flexbox also makes it quite straightforward to align its child elements both horizontally and vertically.

You can apply the same alignment to all the elements within a flex container with align-items. If you’d like different alignments for individual items, use align-self. The alignment of the elements is dependent on the value of the flex-direction property. If its value is row (that is, the elements run in a horizontal line), the alignment applies to the vertical axis. If flex-direction is set to column (that is, the elements run in a vertical line), it applies to the horizontal axis.

For instance, you have a number of shapes you’d like to align differently inside a container element. You need to: .

Set each shape’s align-self property to the appropriate value. Possible values are: center, stretch (the element is positioned to fit its container), flex-start, flex-end, and baseline (the element is positioned at the baseline of its container)
Set the container element to display:flex
Finally, pay attention to the flex-direction property on the parent container, because its value affects the childeren’s alignment.



.example {

  display: flex;

  flex-direction: column;

}
.red {

  align-self: center;

}
.blue {

  align-self: flex-start;

}
.pink {

  align-self: flex-end;

}

Try toggling the parent container’s flex-direction property in the demo below from row to column and vice versa to see this behavior in action:

See the Pen Flexbox Tutorial: align-self by SitePoint (@SitePoint) on CodePen.

If all of the elements within a parent container need to be aligned the same way, you can use the property align-items in the parent container. Possible values are center, flex-start, flex-end, stretch (default value: items are stretched to fit their container), and baseline (items are positioned at the baseline of their containers).



.example {

  display: flex;

  align-items: center;

}

As usual, try toggling the value of the flex-direction property on the parent element between row and column to see how the effect of the values you apply to align-items changes:

See the Pen Flexbox Tutorial: align-items by SitePoint (@SitePoint) on CodePen.

Justifying Content with Flexbox

Another property for alignment is justify-content, which is pretty handy when you want to distribute the available space evenly among multiple elements.

Accepted values are: center, flex-start, flex-end, space-between (items are positioned with spaces between the lines), and space-around (items are positioned with space before, between, and after the lines).

For instance, inside the

element in the simple HTML template you’ve been using all along, you can find three elements:

, .content, and

. At the moment, they’re all pushed to the left of the page. If you’d like to display these three elements in such a way as to create some space in between them, but not to the leftmost and rightmost sides of the first and last element respectively, set justify-content inside .main (their parent container) to space-between:



.main {

  display: flex;

  justify-content: space-between;

}

Try also experimenting with space-around and notice the different results:

See the Pen Flexbox Tutorial: justify-content by SitePoint (@SitePoint) on CodePen.

In the demo above, I’ve also centered the text inside the

element both horizontally and vertically by using justify-content (horizontal centering) and align-items (vertical centering) and setting them both to center:



header {

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

Flexing Items Dimensions with Flexbox

With the flex property you can control the length of your element with respect to other elements inside a flex container.

This property is a shorthand for the following individual properties:

flex-grow — A number specifying how much the element will grow relative to other flexible elements
flex-shrink — A number specifying how much the element will shrink relative other flexible elements
flex-basis — The length of the element. Accepted values are: auto, inherit, or a number followed by “%”, px, em or any other length unit.

For example, to get three equal columns just set flex: 1 for each column and you’re done:



nav, aside, .content {

  flex: 1;

}

If you need the content area to be twice the width of

and

, set flex: 2 for the .content and leave the other two at 1:

See the Pen Flexbox Tutorial: the Flex Property by SitePoint (@SitePoint) on CodePen.

That’s just the simplest application of the flex property, it’s also possible to set flex-grow, flex-shrink and flex-basis values, but that’s beyond the scope of this article.

Wrapping Items and Spacing Them with gap

By default, a flex container tries to keep all its items on one line (flex-wrap: nowrap), shrinking them if it has to. To let items move onto extra lines instead, set flex-wrap to wrap. The value wrap-reverse also allows wrapping but stacks the lines in the opposite direction. The flex-flow shorthand sets flex-direction and flex-wrap in one declaration.

To space items apart, use the gap property on the flex container. It sets the gaps between rows and columns, so you don't need margins on the items themselves:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem; /* row gap, column gap */
}

.cards > .card {
  flex: 1 1 15rem; /* grow, shrink, start at 15rem */
}

The flex shorthand has a few common values worth remembering. flex: 1 lets an item grow and shrink to share the free space, flex: auto is the same as 1 1 auto, and flex: none is the same as 0 0 auto, which keeps the item at its own size.

Further Resources

If you’re ready to move on and learn more about mastering flexbox, checkout these resources:

Flexbox, a paid course on SitePoint Premium by Guy Routledge
Building Mega Menus with Flexbox
How 3 Modern Tools are Using Flexbox Grids
Make Forms Fun with Flexbox.

Conclusion

As you can see, flexbox can make our lives so much easier if we need to control the position of elements on a website. It’s rock solid and makes any hacks, collapsing containers or other weird stuff we have had to deal with every day, obsolete.

As mentioned, a better option for whole-page layout these days is CSS Grid, but it’s still worth understanding the scope of what flexbox can do. The sweet spot for flexbox is alignment of related items in one dimension, but it’s also a handy fallback for the work of Grid in slightly older browsers, if required.

Frequently Asked Questions (FAQs) about CSS Flexbox

What is the main difference between CSS Flexbox and other CSS layout methods?

CSS Flexbox, or Flexible Box Layout, is a CSS layout method designed for one-dimensional layouts. It allows you to control the direction, alignment, size, and order of elements in a container, even when their size is unknown or dynamic. Unlike other CSS layout methods such as Grid or Floats, Flexbox is specifically designed for one-dimensional layouts, either in a row or a column. This makes it a powerful tool for building complex web layouts and responsive designs.

How do I start using CSS Flexbox in my project?

To start using CSS Flexbox, you need to set the display property of your container to flex or inline-flex. This will make the container a flex container and its children flex items. From there, you can use various Flexbox properties to control the layout of the flex items.

Can I use CSS Flexbox to create a responsive design?

Yes, CSS Flexbox is an excellent tool for creating responsive designs. It allows you to control how elements shrink, grow, and align based on the size of their container. This makes it easy to create layouts that adapt to different screen sizes and orientations.

What are the main properties of CSS Flexbox?

CSS Flexbox has several main properties that control the layout of flex items. These include flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content. Each of these properties allows you to control a different aspect of the flex layout, such as the direction of the flex items, whether they wrap onto multiple lines, and how they align along the main and cross axes.

How does the flex-direction property work?

The flex-direction property controls the direction of the flex items in the flex container. It can have one of four values: row, row-reverse, column, and column-reverse. The default value is row, which lays out the flex items from left to right in the direction of the text.

What is the difference between align-items and align-content?

The align-items property controls the alignment of flex items along the cross axis, while the align-content property controls the distribution of lines along the cross axis when there is extra space. If there is only one line of flex items, align-content has no effect.

How can I control the order of flex items?

You can control the order of flex items using the order property. This property takes an integer value, with higher values appearing later in the visual order. By default, all flex items have an order of 0.

Can I use CSS Flexbox with other CSS layout methods?

Yes, CSS Flexbox can be used in combination with other CSS layout methods. For example, you could use Flexbox to layout items within a Grid container, or use Grid to layout larger sections of your page and then use Flexbox within those sections.

Is CSS Flexbox supported in all browsers?

CSS Flexbox is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be fully supported in older versions of these browsers or in Internet Explorer.

Where can I learn more about CSS Flexbox?

There are many resources available online to learn more about CSS Flexbox. Some recommended resources include the CSS Tricks Guide to Flexbox, the MDN Web Docs on Flexbox, and various online tutorials and courses.

A Friendly Introduction to Flexbox for Beginners

The AI briefing for Developers

Key Takeaways

Advantages of Using Flexbox