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>