Modules

Flex

This module helps to set flex properties to elements.

flex

Sets the display: flex property for the element. By default, the flex class sets a horizontal (row) direction.

1
2
3
<div class="item flex">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>

flex-auto

Fills the flex column to the full available width.

<form class="form">
    <div class="form-item flex">
        <div class="form-item-body flex-auto">
            <input>
        </div>
        <div class="form-item-aside">
            <button>...</button>
        </div>
    </div>
</form>

justify-content

Helper classes for justifying content inside flexbox.

  • flex-between
  • flex-around
  • flex-start
  • flex-end
<div class="item flex flex-between">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>

Also the same classes with a suffix to work only on mobile screens.

  • flex-between-sm
  • flex-around-sm
  • flex-start-sm
  • flex-end-sm
<div class="item flex flex-between flex-start-sm">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>

Push right #

Using the Spacing module you can push flex column to the right edge with the ml-auto class.

1
2
<div class="item flex">
    <div class="item-column">...</div>
    <div class="item-column ml-auto">...</div>
</div>

Vertical centering #

Use these classes to align the elements vertically inside the flex container.

  • flex-top
  • flex-middle
  • flex-bottom
1
2
3
<div class="item flex flex-middle">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>

Behavior on small screens #

flex-column-sm

Use flex-column-sm to set a vertical direction on small screens.

1
2
3
<div class="item flex flex-column-sm">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>

Vertical centering

Use these classes to change the vertical alignment behavior of elements inside the flex container.

  • flex-top-sm
  • flex-middle-sm
  • flex-bottom-sm
<div class="item flex flex-middle flex-top-sm">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>