W3.CSS Flexbox
Flexbox Layout (w3-flex)
Flexbox is a layout system for arranging items in rows or columns.
Flexbox makes it easier to design complex responsive web layouts.
Thew3-flex Class
Thew3-flex class creates a container for flexbox items.
The children of the flexbox container automatically become flexbox items.
1
2
3
Note
w3-grid andw3-flex is new inW3.CSS 5.0.
w3-grid vs w3-flex
w3-grid is fortwo-dimensional layout, with rows AND columns.
w3-flex is forone-dimensional layout, with rows OR columns.
Standard CSS Properties
Many standard CSS properties can be used for a flexbox container:
gapflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
Thegap Property
Thegap property specifies the gap between of flex items.
Examples
Therow value (default) displays the flex items horizontally from left to right:
Theflex-direction Property
Theflex-direction property specifies the display-direction of flex items.
It can have one of the following values:
rowcolumnrow-reversecolumn-reverse
Examples
Therow value (default) displays the flex items horizontally from left to right:
Thecolumn value displays the flex items vertically from top to bottom:
Therow-reverse value displays the flex items horizontally (from right to left):
Thecolumn-reverse value displays the flex items vertically (from bottom to top):
Theflex-wrap Property
Theflex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.
It can have one of the following values:
nowrapwrapwrap-reverse
Examples
Thenowrap value (default) specifies that the flex items will not wrap:
Thewrap value specifies that the flex items will wrap if necessary:
Thewrap-reverse value specifies that the flex items will wrap in reverse order:
Theflex-flow Property
Theflex-flow property is a shorthand for setting both theflex-direction andflex-wrap properties.
Thejustify-content Property
Thejustify-content property is used to align the flex items when they do not use all available space on the main-axis (horizontally).
it can have one of the following values:
centerflex-startflex-endspace-aroundspace-betweenspace-evenly
Examples
center positions the flex items in the center of the container:
flex-start value (default) positions the flex items at thebeginning of the container:
flex-end positions the flex items at the end of the container:
space-around value displays the flex items with space around them:
space-between displays the flex items with space between them:
space-evenly displays the flex items with equal space around them:
Thealign-items Property
Thealign-items property is used to align the flex items when they do not use all available vertical space.
It can have one of the following values:
centerflex-startflex-endstretchbaselinenormal
Example
center positions the flex items in the middle of the container:
Result:
1
2
3
Example
Theflex-start value positions the flex items at the top of the container:
Result:
1
2
3
Example
Theflex-end value positions the flex items at the bottom of the container:
Result:
1
2
3
Example
Thestretch value stretches the flex items to fill the container (this is equal to "normal" which is default):
Result:
1
2
3
Example
Thebaseline value positions the flex items at the baseline of the container:
Note: The example uses different font-size to demonstrate that the items gets aligned by the text baseline:
1
2
3
Thealign-content Property
Thealign-content property is used to align the flex lines.
Thealign-content property is similar toalign-items, but instead of aligning flex items, it aligns the flex lines.
It can have one of the following values:
centerstretchflex-startflex-endspace-aroundspace-betweenspace-evenly
In the following examples we use a 300 pixels high container, with theflex-wrap property set towrap, to better demonstrate thealign-content property.
Example
Withcenter, the flex lines are packed toward the center of the container:
Example
Withstretch, the flex lines stretch to take up the remaining space of the container (this is default):
Example
Withflex-start, the flex lines are packed toward the start of the container:
Example
Withflex-end, the flex lines are packed toward the end of the container:
Example
Withspace-between, the space between the flex lines are equal, but the first item is flush with the start edge of the container, and the last item is flush with the end edge of the container:
Example
Withspace-around, the space between the flex lines are equal, but the space before the first item and after the last item is set to half of the space between the flex lines:
Example
Withspace-evenly, the flex lines are evenly distributed in the flex container, with equal space on top, bottom and between:
Perfect Centering
In the following example we will solve a common style problem: perfect centering.
1
2
3
SOLUTION: Set both thejustify-content andalign-items properties tocenter, and the flex item will be perfectly centered:
General CSS 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 display behavior (the type of rendering box) for an element |
| flex-direction | Specifies the direction of the flex 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 |
