This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
Like we specified in the previous chapter, this is a flex container (the blue area) with three flex items:
The flex container becomes flexible by setting the display property to flex:
.flex-container {
display: flex;
}
The flex-direction property defines in which direction the container wants to stack the flex items.
The column value stacks the flex items vertically (from top to bottom):
.flex-container {
display: flex;
flex-direction: column;
}
The column-reverse value stacks the flex items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
The row value stacks the flex items horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
The row-reverse value stacks the flex items horizontally (but from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
The property specifies whether the flex items should wrap or not. The examples below have 12 flex items, to better demonstrate the property.
The wrap value specifies that the flex items will wrap if necessary:
.flex-container {
display: flex;
flex-wrap: wrap;
}
The nowrap value specifies that the flex items will not wrap (this is default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
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 property is a shorthand property for setting both the and properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
The property is used to align the flex items:
The center value aligns the flex items at the center of the container:
.flex-container {
display: flex;
justify-content: center;
}
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;
}
The flex-end value aligns the flex items at the end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}
The space-around value displays the flex items with space before, between, and after the lines:
.flex-container {
display: flex;
justify-content: space-around;
}
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 is used to align the flex items.
In these examples we use a 200 pixels high container, to better demonstrate the property.
The center value aligns the flex items in the middle of the container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
The flex-start value aligns the flex items at the top of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
The flex-end value aligns the flex items at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
In the following example we will solve a very common style problem: perfect centering.
SOLUTION: Set both the and properties to center, and the flex item will be perfectly centered:
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}