Flex Container Properties

Flex container properties define how flex items are laid out, aligned, and wrapped within a flex container. Understanding these properties allows you to create flexible and responsive layouts with ease. This section covers the various flex container properties, their values, and their effects.

display: flex and display: inline-flex

The display property determines how the flex container behaves. There are two primary values you can use:

.flex-container {
  display: flex;
}

Value	Description
`flex`	Creates a block-level flex container.
`inline-flex`	Creates an inline-level flex container.

flex-direction

The flex-direction property defines the direction in which flex items are placed in the flex container. It can take the following values:

.flex-container {
  flex-direction: row-reverse;
}

Value	Description
`row`	Items are placed in a horizontal row (default).
`row-reverse`	Items are placed in a horizontal row in reverse order.
`column`	Items are placed in a vertical column.
`column-reverse`	Items are placed in a vertical column in reverse order.

flex-wrap

The flex-wrap property controls whether flex items should wrap onto multiple lines. It can take the following values:

.flex-container {
  flex-wrap: wrap;
}

Value	Description
`nowrap`	Flex items are displayed in a single line (default).
`wrap`	Flex items wrap onto multiple lines.
`wrap-reverse`	Flex items wrap onto multiple lines in reverse order.

flex-flow

The flex-flow property is a shorthand for flex-direction and flex-wrap. It allows you to set both properties in a single line:

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

In this example, the flex items are placed in a row and will wrap onto multiple lines as needed.

justify-content

The justify-content property aligns flex items along the main axis of the flex container. It can take the following values:

.flex-container {
  justify-content: flex-end;
}

Value	Description
`flex-start`	Items are aligned at the start of the main axis (default).
`flex-end`	Items are aligned at the end of the main axis.
`center`	Items are centered along the main axis.
`space-between`	Items are distributed with space between them.
`space-around`	Items are distributed with space around them.
`space-evenly`	Items are distributed with equal space around them.

align-items

The align-items property aligns flex items along the cross axis of the flex container. It can take the following values:

.flex-container {
  align-items: stretch;
}

Value	Description
`flex-start`	Items are aligned at the start of the cross axis.
`flex-end`	Items are aligned at the end of the cross axis.
`center`	Items are centered along the cross axis.
`baseline`	Items are aligned along their baseline.
`stretch`	Items are stretched to fill the container (default).

align-content

The align-content property aligns flex lines within the flex container when there is extra space in the cross axis. It can take the following values:

.flex-container {
  align-content: space-between;
}

Value	Description
`flex-start`	Lines are aligned at the start of the cross axis.
`flex-end`	Lines are aligned at the end of the cross axis.
`center`	Lines are centered along the cross axis.
`space-between`	Lines are distributed with space between them.
`space-around`	Lines are distributed with space around them.
`stretch`	Lines are stretched to fill the container.

Conclusion

Flex container properties offer a range of options for controlling the layout, alignment, and distribution of flex items. By understanding and using these properties, you can create versatile and responsive layouts that adapt to various screen sizes and design requirements.