Flexbox
Parent Element (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
The flex-direction
property defines in which direction the container wants to stack the flex items.
The column
value stacks the flex items vertically (from top to bottom):
The column-reverse
value stacks the flex items vertically (but from bottom to top):
The row-reverse
value stacks the flex items horizontally (but from right to left):
The flex-wrap Property
The flex-wrap
property specifies whether the flex items should wrap or not.
The wrap
value specifies that the flex items will wrap if necessary:
The nowrap
value specifies that the flex items will not wrap (this is default):
The wrap-reverse
value specifies that the flexible items will wrap if necessary, in reverse order:
The flex-flow Property
The flex-flow
property is a shorthand property for setting both the flex-direction
and flex-wrap
properties.
The justify-content Property
The justify-content
property is used to align the flex items:
The center
value aligns the flex items at the center of the container:
The flex-start
value aligns the flex items at the beginning of the container (this is default):
The flex-end
value aligns the flex items at the end of the container:
Example
The space-around
value displays the flex items with space before, between, and after the lines:
Example
The space-between
value displays the flex items with space between the lines:
The align-items Property
The align-items
property is used to align the flex items.
The flex-start
value aligns the flex items at the top of the container:
The flex-end
value aligns the flex items at the bottom of the container:
Example
The stretch
value stretches the flex items to fill the container (this is default):
Example
The baseline
value aligns the flex items such as their baselines aligns:
Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:
The align-content Property
The align-content
property is used to align the flex lines.
In these examples we use a 600 pixels high container, with the flex-wrap
property set to wrap
, to better demonstrate the align-content
property.
Example
The space-between
value displays the flex lines with equal space between them:
Example
The space-around
value displays the flex lines with space before, between, and after them:
Example
The stretch
value stretches the flex lines to take up the remaining space (this is default):
Example
The center
value displays the flex lines in the middle of the container:
Example
The flex-start
value displays the flex lines at the start of the container:
Example
The flex-end
value displays the flex lines at the end of the container:
Perfect Centering
In the following example we will solve a very common style problem: perfect centering.
SOLUTION: Set both the justify-content
and align-items
properties to center
, and the flex item will be perfectly centered:
Example
The CSS Flexbox Container Properties
The following table lists all the CSS Flexbox Container properties:
Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
Vertically aligns the flex items when the items do not use all available space on the cross-axis
Specifies the type of box used for an HTML element
Specifies the direction of the flexible items inside a flex container
A shorthand property for flex-direction and flex-wrap
Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
Horizontally aligns the flex items when the items do not use all available space on the main-axis
Last updated