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.
The w3-flex Class
The w3-flex class creates a container for flexbox items.
The children of the flexbox container automatically become flexbox items.
1
2
3
Example
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Note
w3-grid and w3-flex is new in W3.CSS 5.0.
w3-grid vs w3-flex
w3-grid is for two-dimensional layout, with rows AND columns.
w3-flex is for one-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
The gap Property
The gap property specifies the gap between of flex items.
Examples
The row value (default) displays the flex items horizontally from left to right:
The flex-direction Property
The flex-direction property specifies the display-direction of flex items.
It can have one of the following values:
-
row -
column -
row-reverse -
column-reverse
Examples
The row value (default) displays the flex items horizontally from left to right:
The column value displays the flex items vertically from top to bottom:
The row-reverse value displays the flex items horizontally (from right to left):
The column-reverse value displays the flex items vertically (from bottom to top):
The flex-wrap Property
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.
It can have one of the following values:
-
nowrap -
wrap -
wrap-reverse
Examples
The nowrap value (default) specifies that the flex items will not wrap:
The wrap value specifies that the flex items will wrap if necessary:
The wrap-reverse value specifies that the flex items will wrap in reverse order:
The flex-flow Property
The flex-flow property is a shorthand 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 when they do not use all available space on the main-axis (horizontally).
it can have one of the following values:
-
center -
flex-start -
flex-end -
space-around -
space-between -
space-evenly
Examples
center positions the flex items in the center of the container:
flex-start value (default) positions the flex items at the
beginning 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:
The align-items Property
The align-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:
-
center -
flex-start -
flex-end -
stretch -
baseline -
normal
Example
center positions the flex items in the middle of the container:
Result:
1
2
3
Example
The flex-start value positions the flex items at the top of the container:
Result:
1
2
3
Example
The flex-end value positions the flex items at the bottom of the container:
Result:
1
2
3
Example
The stretch value stretches the flex items to fill the container
(this is equal to "normal" which is default):
Result:
1
2
3
Example
The baseline 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
The align-content Property
The align-content property is used to align the flex lines.
The align-content property is
similar to align-items, but instead of aligning
flex items, it aligns the flex lines.
It can have one of the following values:
-
center -
stretch -
flex-start -
flex-end -
space-around -
space-between -
space-evenly
In the following examples we use a 300 pixels high container, with the
flex-wrap property set to wrap, to better demonstrate the align-content property.
Example
With center, the flex lines are packed toward the center of the container:
Example
With stretch, the flex lines stretch to take
up the remaining space of the container (this is default):
Example
With flex-start, the flex lines are packed
toward the start of the container:
Example
With flex-end, the flex lines are packed
toward the end of the container:
Example
With space-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
With space-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
With space-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 the justify-content and align-items properties to
center, and the flex item will be perfectly centered:
Example
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 |