A relatively recent addition to the World Wide Web Consortium’s (W3C) official tools for web design is “flexbox” or “flexible boxes”.
The flexbox set of tools offer developers techniques for creating web layouts that consist of “flexible” boxes, or boxes that can easily grow/shrink, and rearrange themselves on a page as its dimensions change.
Flexbox is one of the big payoffs for this week, this is a modern technique that will allow you to increase your design capabilities.
For the next few examples, I am going to use the following basic HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox Example 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main-container">
<div class="flex-item blue"></div>
<div class="flex-item red"></div>
<div class="flex-item green"></div>
<div class="flex-item yellow"></div>
<div class="flex-item orange"></div>
</div>
</body>
</html>
Notice, that there are five elements, each assigned the class .flex-item, along with an individual class name (.blue, .red, .green, .yellow, & .orange). These are all held within a div element with the class .main-container.
In this first example, we will create a simple flex row, by assigning the .main-container class display: flex; & flex-wrap: wrap;.
Each individual .flex-item is then assigned flex: auto; as well as a minimum width of 250 pixels.
Also, notice the use of the flex: auto; rule in the .flex-item class. This tells the browser that each flex item should “grow” the same amount. If you wanted to specify different width percentages, you could do so by setting the flex: property individually for each item, or by specifying a width in percentages for each item.
You can change the size of this browser window to see the items wrap and dynamically change size. You should also open the example in another tab to try it out alone.
Notice how the boxes resize themselves according to the amount of available space in each row.
.main-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: auto;
height: 100px;
min-width: 250px;
}
.red {
background-color: #ff0000;
}
.blue {
background-color: #0057ff;
}
.green {
background-color: #00ff03;
}
.yellow {
background-color: #fffc00;
}
.orange {
background-color: #ffb000;
}
| [Code Download] | [View on GitHub] | [Live Example] |
In this next example, we have added the order attribute to each individual element. As you will notice, on a mobile device or in a browser that is narrow, the elements will line up 1 through 5. However, at the 550 pixel breakpoint, we have used a media query to rearrange the order of the individual items. This occurs again at the 700 pixel breakpoint.
As with the last example, you should open up this example in an external tab to fully explore its effects.
.main-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: auto;
height: 100px;
min-width: 250px;
text-align: center;
}
.red {
background-color: #ff0000;
order: 1;
}
.blue {
background-color: #0057ff;
order: 2;
}
.green {
background-color: #00ff03;
order: 3;
}
.yellow {
background-color: #fffc00;
order: 4;
}
.orange {
background-color: #ffb000;
order: 5;
}
@media (min-width: 550px) {
.red {
order: 3;
}
.blue {
order: 4;
}
.green {
order: 5;
}
.yellow {
order: 1;
}
.orange {
order: 2;
}
}
@media (min-width: 700px) {
.red {
order: 5;
}
.blue {
order: 1;
}
.green {
order: 3;
}
.yellow {
order: 2;
}
.orange {
order: 4;
}
}
| [Code Download] | [View on GitHub] | [Live Example] |
In the final example for this page, notice how flexbox is used to create a classic layout that is adaptive and fits any browser size. The following layout, has a centered “main content” section, and two “asides” (or side columns with secondary content). On desktops or other larger devices, this presents the most important information in the middle of the screen, while providing secondary information or side navigation columns. When the screen shrinks, one of the aside columns drops beneath the main content, and anything below 550 pixels, both asides drop below the main content.
Media queries are used to change the order, and width of boxes at the two breakpoints mentioned above.
Another detail to notice with this example is that flexbox automatically sets the height of all items in a row to be that of the tallest item. The height of the main content box is set explicitly. The asides match the height of the main section when in the same row as it.
As with the last example, you should open up this example in an external tab to fully explore its effects.
.main-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
text-align: center;
}
.red {
background-color: #ff0000;
order: 1;
width: 100%;
}
.blue {
background-color: #0057ff;
order: 2;
width: 16%;
}
.green {
background-color: #00ff03;
order: 3;
width: 68%;
height: 300px;
}
.yellow {
background-color: #fffc00;
order: 4;
width: 16%;
}
.orange {
background-color: #ffb000;
order: 5;
width: 100%;
}
@media (max-width: 1000px) {
.blue {
order: 2;
width: 33%;
}
.green {
order: 3;
width: 67%;
}
.yellow {
order: 4;
width: 100%;
}
}
@media (max-width: 550px) {
.blue {
order: 3;
width: 100%;
}
.green {
order: 2;
width: 100%;
}
.yellow {
order: 4;
width: 100%;
}
}
| [Code Download] | [View on GitHub] | [Live Example] |