component

Flexbox

Utilities for controlling how flex items behave. Breakpoints modifiers

  • is-flex: will set basic display: flex.
1
2
3
4

Flex directions

Utilities for controlling the direction of flex items.

Class Properties
flex-row flex-direction: row
flex-row-reverse flex-direction: row-reverse
flex-col flex-direction: column
flex-col-reverse flex-direction: column-reverse

Basic usage

Row

Use flex-row to position flex items horizontally:

1
2
3
4

Row reversed

Use flex-row-reverse to position flex items horizontally in the opposite direction:

1
2
3
4

Column

Use flex-col to position flex items vertically:

1
2
3
4

Column reversed

Use flex-col-reverse to position flex items vertically in the opposite direction:

1
2
3
4

Flex wrap

Sets whether flex items are forced onto one line or can wrap onto multiple lines.

Class Properties
flex-wrap flex-wrap: wrap
flex-nowrap flex-wrap: nowrap
flex-wrap-reverse flex-wrap: wrap-reverse
  • Use flex-wrap to allow flex items to wrap:
1
2
3
4

Resize your browser to see this behavior.

  • flex-wrap-reverse will wrap flex items in the reverse direction:
1
2
3
4

Resize your browser to see this behavior.

Flex grow

Specifies how much of the remaining space in the flex container should be assigned to the item.

Class Properties
flex-1 flex: 1 1 0%
flex-auto flex: 1 1 auto
flex-initial flex: 0 1 auto
flex-block flex: 0 0 100%
  • With flex-1: allow a flex item to grow and shrink as needed, ignoring its initial size.
1
2
3
4

Resize your browser to see this behavior.

  • With flex-auto: to allow a flex item to grow and shrink, taking into account its initial size.
1
2
3

Resize your browser to see this behavior.

  • With flex-initial: allow a flex item to shrink but not grow, taking into account its initial size.
1
2
3

Resize your browser to see this behavior.

  • With flex-block: allows the item to occupy all available space without shrinking.
1
2
3
4