Why flexbox?
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This unit explains all the fundamentals.
For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like floats and positioning. These are fine, and they work, but in some ways they are also rather limiting and frustrating.
The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:
- Vertically centering a block of content inside its parent.
- Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
- Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
As you’ll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let’s dig in!
Introducing a simple example
In this unit we are going to get you to work through a series of exercises to help you understand how flexbox works. To get started, we will use some simple code like this one:
<header>
<h1>Valencian Community</h1>
</header>
<section>
<article>
<h2>Alicante</h2>
<p>The campus of the University of Alicante lies in San Vicente del Raspeig, bordering the city of Alicante to the north. More than 25,000 students attend the University.</p>
</article>
<article>
<h2>Valencia</h2>
<p>Valencia is the capital of the autonomous community of Valencia and the third-largest city in Spain after Madrid and Barcelona, surpassing 800,000 inhabitants in the municipality.</p>
</article>
<article>
<h2>Castellón</h2>
<p>The city is notorious for its music festivals, among which we find: the Tanned Tin music festival for alternative music, the Benicàssim's International Festival, the Arenal Sound and the Rototom Sunsplash Festival, known for its reggae music.</p>
</article>
</section>
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 75px;
}
h1 {
text-align: center;
color: white;
line-height: 75px;
margin: 0;
}
article {
padding: 1%;
margin: 1%;
background: aqua;
}
You’ll see that we have a <header> element with a top level heading inside it, and a <section> element containing three <article>s. We are going to use these to create a fairly standard three column layout.
Proposed exercise: Simple boxes
Using the code of the previous example, create a new webpage with a similar content. You can use any other colors and styles you like.
Specifying what elements to lay out as flexible boxes
To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of display on the parent element of the elements you want to affect. In this case we want to lay out the <article> elements, so we set this on the <section>:
section {
display: flex;
}
This causes the <section> element to become a flex container, and its children to become flex items. The result of this should be something like so:
So, this single declaration gives us everything we need — incredible, right? We have our multiple column layout with equal-sized columns, and the columns are all the same height. This is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this.
To be clear, let’s reiterate what is happening here. The element we’ve given a display value of flex to is acting like a block-level element in terms of how it interacts with the rest of the page, but its children are being laid out as flex items. The next section will explain in more detail what this means. Note also that you can use a display value of inline-flex if you wish to lay out an element’s children as flex items, but have that element behave like an inline element.
Proposed exercise: Flexible boxes
Add some CSS code to the previous exercise so that all the contents inside the
As explained, you only have to add three lines of code and everything is done! You will have flexible boxes:<section>element are displayed as flexible boxes (display:flex) which are shown from left to right, all of them having the same height.
section {
display: flex;
}
The flex model
When elements are laid out as flex items, they are laid out along two axes:
- The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
- The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.
- The parent element that has
display: flexset on it (the <section> in our example) is called the flex container. - The items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).
Bear this terminology in mind as you go through subsequent sections. You can always refer back to it if you get confused about any of the terms being used.
Columns or rows?
Flexbox provides a property called flex-direction that specifies what direction the main axis runs in (what direction the flexbox children are laid out in). By default this is set to row, which causes them to be laid out in a row in the direction your browser’s default language works in (usually from left to right), but you can also use the following declaration inside your <section> rule:
flex-direction: column;
This would put the items back in a column layout, much like they were before we added any CSS.
Wrapping
One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. And also if you have many boxes, the final result will be presented with some quite narrow columns. Have a look at our example:
Here we see that the children are indeed breaking out of their container for small screens of filling the window with narrow columns. One way in which you can fix this is to add the following declaration to your <section> rule:
section {
...
flex-wrap: wrap;
}
Also, add the following declaration to your <article> rule:
article {
...
flex: 48%;
}
You’ll see that the layout looks much better with this included:
We now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The flex:48% declaration set on the articles means that each will be at least half the window size (48% wide, since we have 1% margins on both left and right). You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.
But there’s more we can do here. For example, you can try changing your flex-direction property value to row-reverse. Now you’ll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.
Proposed exercise: Wrapped content
Using the code of the last example above, add three more towns you like (to show at least 9 towns in total), and also insert a picture for each one. You may also change the colors of the boxes and text as you like, or you can even add more styles to your code (box and text shadows, etc.).
For example: