Flash cards
Review the key moves
What is the main idea behind CSS Flex Container?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Put the learning moves in the order that makes the concept easiest to apply.
CSS Flex Container Properties
The flex container element can have the following properties:
- display - Must be set to flex or inline-flex
- flex-direction - Sets the display-direction of flex items
- flex-wrap - Specifies whether the flex items should wrap or not
- flex-flow - Shorthand property for flex-direction and flex-wrap
- justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
- align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically)
- align-content - Aligns the flex lines when there is extra space in the cross axis and flex items wrap
CSS flex-direction Property
The flex-direction property specifies the display-direction of flex items in the flex container.
This property can have one of the following values:
- row (default)
- column
- row-reverse
- column-reverse
rowcolumnrow-reversecolumn-reverseCSS flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.
This property can have one of the following values:
- nowrap (default)
- wrap
- wrap-reverse
nowrapwrapwrap-reverseCSS 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;
}Live preview
Flex Container Subpages
Continue learning about flex container properties
- justify-content - horizontal alignment of flex items
- align-items & align-content - vertical alignment and true centering