Bugl — code interview practice that feels like a game

Loading lesson path

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

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

column

row-reverse

column-reverse

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

wrap

wrap-reverse

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

Example

Formatted code

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

Live preview

Continue learning about flex container properties