Loading lesson path

CSS•Modern Layout

CSS Flex Container

CSS Flex Container Properties

The flex container element can have the following properties: display

Formula

- 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

Formula

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)

Formula

column row - reverse column - reverse

Example

Formula

The row value is the default value, and it displays the flex items horizontally (from left to right):.flex - container {

display: flex;
flex-direction: row;
}

Result:

Example

Formula

The column value displays the flex items vertically (from top to bottom):.flex - container {

display: flex;
flex-direction: column;
}

Result:

Example

Formula

The row - reverse value displays the flex items horizontally (but from right to left):.flex - container {

display: flex;
flex-direction: row-reverse;
}

Result:

Example

Formula

The column - reverse value displays the flex items vertically (but from bottom to top):.flex - container {

display: flex;
flex-direction: column-reverse;
}

Result:

CSS 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)

Formula

wrap wrap - reverse

Example

Formula

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

display: flex;
flex-wrap: nowrap;
}

Result:

Example

Formula

The wrap value specifies that the flex items will wrap if necessary:.flex - container {

display: flex;
flex-wrap: wrap;
}

Result:

Example

Formula

The wrap - reverse value specifies that the flex items will wrap if necessary, in reverse order:.flex - container {

display: flex;
flex-wrap: wrap-reverse;
}

Result:

CSS flex-flow Property

Formula

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;
}

Flex Container Subpages

Continue learning about flex container properties:

Formula

justify - content
- horizontal alignment of flex items align - items & align - content

vertical alignment and true centering

CSS RWD Intro Code Challenge

CSS Grid Container

Loading lesson path

Learn/CSS/Modern Layout

CSS•Modern Layout

CSS Flex Container