Flex

View in Github

Barebones flex helpers. This breaks some convention with other layout classes, but we use flexbox enough to justify it.

💡 See align-items and justify-content helpers for alignment helpers.

.l-flex

display:flex Uses flexbox.


    <div class="has-padding l-flex">
        <div class="has-bg-black has-text-white" style="width: 150px; height: 150px;">1</div>
        <div class="has-bg-yellow" style="width: 150px; height: 150px;">2</div>
    </div>

This class isn't referenced anywhere

.l-flex-row

flex-direction: row Horizontal flexbox. (default)


<div class="has-padding has-section-padding has-border l-flex l-flex-row">
    <div class="has-bg-black has-text-white" style="width: 150px; height: 150px;">1</div>
    <div class="has-bg-yellow" style="width: 150px; height: 150px;">2</div>
  </div>

This class isn't referenced anywhere

.l-flex-column

flex-direction: column Vertical flexbox.


<div class="has-padding has-section-padding has-border l-flex l-flex-column">
    <div class="has-bg-black has-text-white" style="width: 150px; height: 150px;">1</div>
    <div class="has-bg-yellow" style="width: 150px; height: 150px;">2</div>
  </div>

This class isn't referenced anywhere