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
class="w3-flex" style="gap:8px">
<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:
<div class="w3-flex" style="gap:8px">
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:
<div class="w3-flex" style="flex-direction:row">
The column value displays the flex items vertically from top to bottom:
<div class="w3-flex" style="flex-direction:column">
The row-reverse value displays the flex items horizontally (from right to left):
<div class="w3-flex" style="flex-direction:row-reverse">
The column-reverse value displays the flex items vertically (from bottom to top):
<div class="w3-flex" style="flex-direction:column-reverse">
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:
<div class="w3-flex" style="flex-wrap:nowrap">
The wrap value specifies that the flex items will wrap if necessary:
<div class="w3-flex" style="flex-wrap:wrap">
The wrap-reverse value specifies that the flex items will wrap in reverse order:
<div class="w3-flex" style="flex-wrap:wrap-reverse">
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:
<div class="w3-flex" style="justify-content:center">
flex-start value (default) positions the flex items at the
beginning of the container:
<div class="w3-flex" style="justify-content:flex-start">
flex-end positions the flex items at the end of the container:
<div class="w3-flex" style="justify-content:flex-end">
space-around value displays the flex items with space around them:
<div class="w3-flex" style="justify-content:flex-space-around">
space-between displays the flex items with space between them:
<div class="w3-flex" style="justify-content:flex-space-between">
space-evenly displays the flex items with equal space around them:
<div class="w3-flex" style="justify-content:flex-space-evenly">
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:
<div class="w3-flex" style="align-items:center">
Result:
1
2
3
Example
The flex-start value positions the flex items at the top of the container:
<div class="w3-flex" style="align-items:flex-start">
Result:
1
2
3
Example
The flex-end value positions the flex items at the bottom of the container:
<div class="w3-flex" style="align-items:flex-end">
Result:
1
2
3
Example
The stretch value stretches the flex items to fill the container
(this is equal to "normal" which is default):
<div class="w3-flex" style="align-items:stretch">
Result:
1
2
3
Example
The baseline value positions the flex items
at the baseline of the container:
<div class="w3-flex" style="align-items:baseline">
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:
<div class="w3-flex" style="align-content:center">
Example
With stretch, the flex lines stretch to take
up the remaining space of the container (this is default):
<div class="w3-flex" style="align-content:stretch">
Example
With flex-start, the flex lines are packed
toward the start of the container:
<div class="w3-flex" style="align-content:flex-start">
Example
With flex-end, the flex lines are packed
toward the end of the container:
<div class="w3-flex" style="align-content:flex-end">
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:
<div class="w3-flex" style="align-content:space-between">
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:
<div class="w3-flex" style="align-content:space-around">
Example
With space-evenly, the flex lines are evenly distributed in the flex container, with equal space
on top, bottom and between:
<div class="w3-flex" style="align-content:space-evenly">
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
<div class="w3-flex" style="height:300px;justify-content:center;align-items:center">
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 |
