Flexbox is one of the most useful CSS modules when it comes to arranging elements in a container. Flexbox allows elements to grow or shrink, depending on the available space in order to maintain the integrity of layouts.
Using Flexbox is the next step after using float-based layouts, not only because it can be easier to work with and wrap our heads around its concepts, but also because it may result in less markup and CSS.
Tip
A powerful partner to Flexbox is the Grid Layout, which is still in its early stages of development, and browser support is scarce. Since Grid Layout is out of the scope of this section, you can read more on Rachel Andrew's project site, Grid By Example, at http://gridbyexample.com/
Before we dive into the Flexbox properties, the following diagram will help us understand the terminology and orientations:
Let's dive into Flexbox properties.
This property defines how much a flex item should grow relative to other flex items via a flex grow factor, and it looks like this:
flex--grow: 2;
The flex grow factor is a number without a unit. Negative values are invalid.
The flex item will grow by the defined grow factor as long as there is space to do so. It can grow on both the main or cross axes, depending on the direction defined by the flex-direction property, which we'll talk about in a minute.
CSS:
/*First flex item will take 1 unit of the available space*/
.element-1 { flex-grow: 1; }
/*Second and third flex items will take 2 units of the available space*/
.element-2 { flex-grow: 2; }
.element-3 { flex-grow: 2; }
/*Fourth flex item will take 1 unit of the available space*/
.element-4 { flex-grow: 1; }This property defines how much a flex item should shrink relative to other flex items via a flex shrink factor, and it looks like this:
flex-shrink: 1;
The flex shrink factor is a number without a unit. Negative values are invalid.
This is used when the sum of all flex items exceeds the size of the flex container. This could be horizontally or vertically (main axis or cross axis). By assigning flex shrink factors to one or multiple flex items, we can make them fit the size of the flex container.
CSS:
/*First flex item will take 1 unit of the available space*/
.element-1 { flex-shrink: 1; }
/*Second and third flex items will take 2 units of the available space*/
.element-2 { flex-shrink: 2; }
.element-3 { flex-shrink: 2; }
/*Fourth flex item will take 1 unit of the available space*/
.element-4 { flex-shrink: 1; }This property defines the initial width of a flex item, and it looks like this:
flex-basis: 200px;
flex-basis accepts a length value with either an absolute or a relative length unit (px, em, %, and so on) or the content keyword.
When using content, the container will adapt to the content inside of it. Negative values are invalid.
CSS:
/*Both elements will be 50% wide*/
/*Both elements will be 50% wide*/
.a { flex-grow: 1; }
.b { flex-grow: 1; }
/*First element WILL NOT grow and has a fixed width of 200px if there's enough space*/
.a {
flex-grow: 0;
flex-basis: 200px;
}
/*Second element WILL grow and has a minimum width of 200px if there's enough space*/
.b {
flex-grow: 1;
flex-basis: 200px;
}
/*First element WILL grow and has a minimum width of 200px if there's enough space*/
.a {
flex-grow: 1;
flex-basis: 200px;
}
/*Second element:
- WILL NOT grow
- WILL shrink if the container is smaller than 400px
- It has a minimum width of 200px if there's enough space*/
.b {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 200px;
}The flex-direction CSS property defines the direction of the flex items inside a flex container, and it looks like this:
flex-direction: column;
This property sets the direction in which flex items can be laid out, either horizontal with row or vertical with column.
There are four values: two for horizontal and two for vertical:
This lays out the flex items on a horizontal axis. This is the default value.
When flex items are laid out with row, they stack side by side from left to right.
This is the same as row but in reverse. When flex items are laid out with row-reverse, they stack side by side from right to left.
This lays out the flex items on a vertical axis.
When flex items are laid out with column, they stack one on top of the other, starting from top to bottom.
This is the same as column but in reverse.
When flex items are laid out with column-reverse, they stack one on top of the other, starting from bottom to top.
CSS:
/*Horizontal axis: row*/
.flex-container { flex-direction: row; }
/*Horizontal axis: row-reverse*/
.flex-container { flex-direction: row-reverse; }
/*Vertical axis: column*/
.flex-container { flex-direction: column; }
/*Vertical axis: column*/
.flex-container { flex-direction: column-reverse; }The
flex-wrap CSS property defines whether a flex item should wrap or not when the container becomes too small, and it looks like this:
flex-wrap: wrap;
This property accepts one of three keyword values: nowrap, wrap and wrap-reverse.
The flex-flow CSS property is the shorthand for the
flex-direction and flex-wrap properties, and it looks like this:
flex-flow: row wrap-reverse;
We now know that the flex-direction property defines the direction of the flex items in either columns or rows.
The flex-wrap attribute, on the other hand, defines whether the flex items should wrap or not when the container becomes too small.
We can specify either one or two values. The order doesn't affect the result.
The flex-direction attribute can take any of its available values: row : (default value), row-reverse, column, or column-reverse.
The flex-wrap attribute can take any of its available values as well: nowrap (default value),wrap, or wrap-reverse.
CSS:
/*Main axis and elements will wrap from bottom to top*/
.flex-container {
flex-direction: row;
flex-wrap: wrap-reverse;
}
/*Above rule is the same as this rule*/
.flex-container { flex-flow: row wrap-reverse; }
/*Main axis and flex items will wrap from top to bottom*/
.flex-container { flex-flow: row-reverse wrap; }
/*Cross axis, wrapping doesn't happen on column layout*/
.flex-container { flex-flow: column; }The
align-content CSS property aligns lines inside a flex container as long as there is extra space on the cross axis, and it looks like this:
align-content: center;
There are six values: flex-start, flex-end, center, space-around, space-between, and stretch.
This distributes the lines evenly in the container, but the first line is placed at the start of the container and the last line at the end.
This is the default value. The lines will evenly stretch to fill the whole container.
CSS:
/*All lines at the top*/
.flex-container { align-content: flex-start; }
/*All lines at the bottom*/
.flex-container { align-content: flex-end; }
/*All lines at the center*/
.flex-container { align-content: center; }
/*Evenly spaced lines. The top one touches the top edge; the bottom one touches the bottom edge*/
.flex-container { align-content: space-around; }
/*Evenly spaced lines, even the top and bottom ones*/
.flex-container { align-content: space-between; }
/*Lines will stretch to fill all the available space*/
.flex-container { align-content: stretch; }The
align-items CSS property sets the default alignment of the flex elements inside the flex container, and it looks like this:
align-items: center;
This property accepts five values: flex-start, flex-end, center, baseline, and stretch.
This aligns the flex elements to the center of the container and and at the same time, it aligns them to their center.
This stretches the flex elements to fill the entire parent container.
CSS:
/*Align items to the beginning*/
.flex-container { align-items: flex-start; }
/*Align items to the end*/
.flex-container { align-items: flex-end; }
/*Align items to the center*/
.flex-container { align-items: center; }
/*Align items to their text baseline*/
.flex-container { align-items: baseline; }
/*Make items stretch and fill the parent container*/
.flex-container { align-items: stretch; }The
align-self CSS property aligns a specific flex item within its parent container, and it looks like this:
align-self: flex-start;
This property accepts the exact values as align-items, and the results are the same as well: flex-start, flex-end, center, baseline, and stretch.
This stretches the flex elements to fill the entire parent container.
CSS:
/*Align the flex item to the top*/
.element { align-self: flex-start; }
/*Align the flex item to the bottom*/
.element { align-self: flex-end; }
/*Align the flex item to the center*/
.element { align-self: center; }
/*Align the flex items to their text baseline*/
.element { align-self: baseline; }
/*Make the flex item stretch*/
.element { align-self: stretch; }The order CSS property is used to alter the default order of flex items within the same parent container, and it looks like this:
order: 3;
By default, flex items appear in the same order they appear in the source (HTML). The order property allows us to alter the display order while maintaining their source order. This property accepts a number value without a unit.
The order is defined in a logical way: The lower the number, the more ahead it is in the order. Items that have the same number are laid out according to the source document.
The starting number is 0 (zero), not 1. Negative values are allowed.
CSS:
/*The default order of all elements has been altered,
however, their source order remains the same.*/
.element-1 { order: 3; }
.element-2 { order: 0; }
.element-3 { order: -1; }
.element-4 { order: 2; }The
justify-content CSS property works only on flex items. It allows the browser to distribute the space in between and around the flex items based on their main axes.
This property supports five keyword values: flex-start, flex-end, center, space-between, and space-around.
The flex CSS property is the shorthand in which we can declare the values for flex-grow, flex-shrink, and flex-basis. It's recommended that you follow this order when declaring the values.
CSS:
/*Apply flexbox to the parent container*/
.flex-container { display: flex; }
/*Flex items create 4 containers, each of different size.
Each container grows/shrinks proportional to the
flex growth/shrink factorsand the browser automatically
calculates the flex-basis*/
.element-1 { flex: 1 4 auto; }
.element-2 { flex: 2 3 auto; }
.element-3 { flex: 3 2 auto; }
.element-4 { flex: 4 1 auto; }