CSS Flex Container
Parent Element (Container)
This is a flex container (the blue area) with three flex elements, as we mentioned in the last chapter:
Setting the display property to flex causes the flex container to become flexible:
Example
.flex-container {
display: flex;
}
The flex container properties are:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
The flex-direction Property
The direction in which the container want to stack the flex elements is specified by the flex-direction attribute.
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
Whether or not the flex elements should wrap is determined by the flex-wrap attribute.
In order to properly illustrate the flex-wrap property, the following examples include 12 flex pieces.
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
Setting the flex-wrap and flex-direction attributes together is possible with the help of the flex-flow property.
Example
.flex-container {
display: flex;
flex-flow: row wrap;
}
The justify-content Property
The flex components are aligned using the justify-content property:
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 flex items are aligned using the align-items attribute.
To better illustrate the align-items attribute, we utilize a 200 pixel height container in these examples.
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 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 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;
}
Note: that the sample shows how the text baseline aligns the elements by using varying font sizes:
The align-content Property
The flex lines are aligned using the align-content attribute.
To better illustrate the align-content property, we utilize a 600 pixel high container in these instances with the flex-wrap property set to wrap.
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 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 center value displays 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 this instance, we’ll address a prevalent stylistic dilemma: great centering.
The flex item will be exactly centered if you set the justify-content and align-items properties to center.
Example
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
The CSS Flexbox Container Properties
The following table lists all the CSS Flexbox Container properties:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
