CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

EXAMPLE:

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

EXAMPLE:

.flex-container {
display: flex;
}

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

EXAMPLE:

The column value stacks the flex items vertically (from top to bottom):

.flex-container {
display: flex;
flex-direction: column;
}

EXAMPLE:

The column-reverse value stacks the flex items vertically (but from bottom to top):

.flex-container {
display: flex;
flex-direction: column-reverse;
}

EXAMPLE:

The row value stacks the flex items horizontally (from left to right):

.flex-container {
display: flex;
flex-direction: row;
}

EXAMPLE:

The row-reverse value stacks the flex items horizontally (but from right to left):

.flex-container {
display: flex;
flex-direction: row-reverse;
}

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

EXAMPLE:

The wrap value specifies that the flex items will wrap if necessary:

.flex-container {
display: flex;
flex-wrap: wrap;
}

EXAMPLE:

The nowrap value specifies that the flex items will not wrap (this is default):

.flex-container {
display: flex;
flex-wrap: nowrap;
}

EXAMPLE:

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

EXAMPLE:

.flex-container {
display: flex;
flex-flow: row wrap;
}

The justify-content Property

The justify-content property is used to align the flex items:

EXAMPLE:

The center value aligns the flex items at the center of the container:

.flex-container {
display: flex;
justify-content: center;
}

EXAMPLE:

The flex-start value aligns the flex items at the beginning of the container (this is default):

.flex-container {
display: flex;
justify-content: flex-start;
}

EXAMPLE:

The flex-end value aligns the flex items at the end of the container:

.flex-container {
display: flex;
justify-content: flex-end;
}

EXAMPLE:

The space-around value displays the flex items with space before, between, and after the lines:

.flex-container {
display: flex;
justify-content: space-around;
}

EXAMPLE:

The space-between value displays the flex items with space between the lines:

.flex-container {
display: flex;
justify-content: space-between;
}

The align-items Property

The align-items property is used to align the flex items.

EXAMPLE:

The center value aligns the flex items in the middle of the container:

.flex-container {
display: flex;
height: 200px;
align-items: center;
}

EXAMPLE:

The flex-start value aligns the flex items at the top of the container:

.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}

EXAMPLE:

The flex-end value aligns the flex items at the bottom of the container:

.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}

EXAMPLE:

The stretch value stretches the flex items to fill the container (this is default):

.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}

EXAMPLE:

The baseline value aligns the flex items such as their baselines aligns:

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}

The align-content Property

The align-content property is used to align the flex lines.

EXAMPLE:

The space-between value displays the flex lines with equal space between them:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}

EXAMPLE:

The space-around value displays the flex lines with space before, between, and after them:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}

EXAMPLE:

The stretch value stretches the flex lines to take up the remaining space (this is default):

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}

EXAMPLE:

The center value displays display the flex lines in the middle of the container:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}

EXAMPLE:

The flex-start value displays the flex lines at the start of the container:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}

EXAMPLE:

The flex-end value displays the flex lines at the end of the container:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

EXAMPLE:

.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}

Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

EXAMPLE:

The order Property

The order property specifies the order of the flex items.

EXAMPLE:

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

EXAMPLE:

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

EXAMPLE:

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

EXAMPLE:

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

EXAMPLE:

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container's align-items property.

EXAMPLE:

Align the third flex item in the middle of the container:

EXAMPLE:

Align the second flex item at the top of the container, and the third flex item at the bottom of the container: