Flexbox layout (12 fractions)
12/12
6/12
6/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12
<div class="display-flex gap-1">
<div class="width-6">...</div>
<div class="width-6">...</div>
...
</div>
Flexible widths
Supports inline values: --min-width: <value>
.width-max
.width-min
.width-auto
.width-auto
Offset (1-11)
.display-flex
.offset-2
Justify (main axis)
.justify-start
1
2
3
.justify-center
1
2
3
.justify-end
1
2
3
.justify-between
1
2
3
.justify-around
1
2
3
.justify-evenly
1
2
3
Align (cross axis)
Container:
.align-stretch
1
2
3
.align-start
1
2
3
.align-center
1
2
3
.align-end
1
2
3
Flex items:
.align-self-stretch
1
2
3
.align-self-start
1
2
3
.align-self-center
1
2
3
.align-self-end
1
2
3
Order
.order-last
(1) .order-last
2
3
.order-first
1
2
(3) .order-first
Direction (Row)
.display-flex
(default)
1
2
3
.display-flex.reverse
1
2
3
Direction (Column)
.column
1
2
3
.column.reverse
1
2
3
.column
(variable height)
.width-min
.width-auto
.width-min
Gap
.display-flex.gap-n [0-5]
.width-auto
.width-auto
.width-auto
.display-flex[style="--gap: <length>"]
.width-auto
.width-auto
.width-auto
Breakpoints
Class | Breakpoint |
---|---|
(none) | 0 and up |
xs |
0 and up |
sm |
30em and up |
md |
42em and up |
lg |
57em and up |
Containers
Class | Width | Max width |
---|---|---|
.container |
auto |
1200px |
.container-fluid |
100% |
none |