Introduction
The CSS Flexbox utility is used to create one-dimensional layouts that allow us to place items in rows or columns. It is called a “flexbox” because items adjust to either fill empty space or shrink to fit into smaller spaces, which makes the flexbox ideal for building responsive websites.
It is worth noting that flexbox offers a lot of functionality to developers to create complex layouts, but it is excellent for simple layouts as well. Flexbox and other layout systems are solutions to creating a responsive layout. Before now, floating items and the use of HTML tables are the options developers relied on to lay out their content on a webpage.
Using Flexbox
display: flex
To start using flexbox, you need to set a container to display: flex, which enables a flex context for all of its direct children. The child items will default to being displayed in a row and will divide the available space in the container amongst the child items. If the child items are too small to take up the whole container, they will stack up from the left margin.
<section class="container">
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
</section> .container {
display: flex;
} .item {
margin: 5px;
}Flexbox Axes
Flexbox is a powerful layout that allows you to lay out the flex item along two axes in a flex container. The axes are the main axis and the cross axis. The main axis is the primary axis along which flex items can be laid out. By default, the main axis is horizontal(row) i.e. flex items are laid out from left to right. The code snippet above is a very good example. Once you set the display property of a container to flex, the main axis is on the row while the cross axis is on the column. You can change the default by adjusting the value of the flex-direction property of a flex container.
flex-direction
By default, the flex-direction property is set to row, so the flexed items will display in a row. For mobile devices, it is useful that we can switch this direction to a column so that the items now display in a vertical column. We can simply set the flex-direction to column, overriding the default value of row.
You can also set the direction to row-reverse or column-reverse, and the items will display in the opposite order to how they have been written.
<section class="container">
<div class="item wider-item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
</section> .container {
display: flex;
flex-direction: column;
}
.item {
margin: 5px;
flex: 1;
}flex
To set how much space the flex items take up, you can use the flex property followed by a number. All the flex numbers are added together, and each item is divided by the total.
In the example below, the items are set to have flex: 1, but the class of ‘wider-item’ is set to flex: 4. That means the container has a total of 6 (4+1+1). The .wider-item gets a space of 4/6, and the other two items get a space of 1/6 each.
<section class="container">
<div class="item wider-item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis.
Proin tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra felis eu nunc
ullamcorper imperdiet. Nulla a mattis elit. Pellentesque vitae tortor nulla.
</p>
</div>
</section> .container {
display: flex;
}
.item {
margin: 5px;
flex: 1;
}
.wider-item {
flex: 4;
}flex-wrap
By default, the items will all fit on one line to take up the available space in the container. But sometimes, the items can get quite squashed. In this case, set flex-wrap: items will be moved, or “wrap”, onto another line if there isn’t available space.
order
If you would like to restructure the order in which items appear in their container, you can set the order number in which they should appear. The lowest number shows first. This can be especially useful when working with media queries and different layouts for different device screen sizes.
justify-content
The justify-content property sets the alignment and spacing of the flexed items along the main axis.
<main>
<section>One</section>
<section>Two</section>
<section>Three</section>
</main> main {
display: flex;
justify-content: space-around;
}
section {
padding: 20px;
background-color: lightblue;
}In the above example, we use justify-content: space-around to distribute the child items evenly and leave a half-size space on either side.
Here are other possible values for the justify-content property.
centerplaces items in thecenterof the parent.startandendplace items either at the start of the parent or the end.space-betweenplaces the first item at the start and the last item at the end. Items in between are then spaced evenly.space-evenlyplaces all items evenly with even space between them.
Gap
The gap property is used by both Flexbox and CSS Grids to set the space between columns and rows.
INFOThis web app can quickly help you visualize how some of the basic flexbox properties work: https://flexbox-app.netlify.app/
Activities
Activity 1
WATCHThis tutorial video is on flexbox. (4m 12s)
Activity 2
READA Complete Guide to Flexbox by CSS Tricks
Activity 3
EXPLORE
Lesson Task
Brief
There are practice questions in the master branch of this repo.
Attempt the answers before checking them against the answers in the answers branch of the repo.