Flexbox
Control CSS flexbox layout.
Classes
Class | Properties |
---|---|
.flex | display: flex; |
.inline-flex | display: inline-flex; |
.flex-row | flex-direction: row; |
.flex-row-reverse | flex-direction: row-reverse; |
.flex-column | flex-direction: column; |
.flex-column-reverse | flex-direction: column-reverse; |
.flex-wrap | flex-wrap: wrap; |
.flex-wrap-reverse | flex-wrap: wrap-reverse; |
.flex-nowrap | flex-wrap: nowrap; |
.flex-initial | flex: 0 1 auto |
.flex-1 | flex: 1 1 0% |
.flex-auto | flex: 1 1 auto |
.flex-none | flex: none |
.flex-grow | flex-grow: 1 |
.flex-shrink | flex-shrink: 1 |
.flex-row
Sets the flex-direction property to row
.
1
2
3
4
.flex-row-reverse
Sets the flex-direction property to row-reverse
.
1
2
3
4
.flex-column
Sets the flex-direction property to column
.
1
2
3
4
.flex-column-reverse
Sets the flex-direction property to column-reverse
.
1
2
3
4
.flex-wrap
Sets the flex-wrap property to wrap
.
1
2
.flex-nowrap
Sets the flex-wrap property to nowrap
.
1
2
.flex-wrap-reverse
Sets the flex-wrap property to wrap-reverse
.
1
2