Before the Flexbox Layout module, there were four layout modes:
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
To start using the Flexbox model, you need to first define a flex container.
Like we specified in the previous chapter, this is a flex container (the blue area) with three flex items:
The flex container becomes flexible by setting the display property to flex:
The flex container properties are:
The flex-direction property defines in which direction the container wants to stack the flex items.
The flex-wrap property specifies whether the flex items should wrap or not.
The examples below have 12 flex items, to better demonstrate the flex-wrap property.
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
The align-content property is used to align the flex lines.
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 |