Flex

Quickly manage the layout, alignment, and sizing of grid columns and other elements. For more complex implementations, custom CSS may be necessary. To learn flexbox read a flexbox guide.

To enable flexbox layout use display utilities like .d-flex, .d-inline-flex and their responsive variations.

<div class="d-flex">
    I'm a flexbox container!
    All children inside me will behave in according to flexbox.
</div>

Flex container's classes

Direction

Set the direction of flex items in a flex container. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Wrap

Justify content

Align items

Align content

This property has no effect on single rows of flex items. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

Children's classes

Fill

Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space.

<div class="d-flex">
  <div class="p-2 example">No fill</div>
  <div class="p-2 flex-fill example">Equal</div>
  <div class="p-2 flex-fill example">Equal</div>
</div>

Grow and shrink

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.

Align self

Order

Change the visual order of specific flex items with order utilities. With this classes you can also change order of grid columns since Setka's grid build with flexbox layout.