bulma/docs/documentation/helpers/flexbox-helpers.html

---
title: Flexbox helpers
layout: docs
theme: helpers
doc-tab: helpers
doc-subtab: helpers-flexbox
breadcrumb:
  - home
  - documentation
  - helpers
  - helpers-flexbox
flex-direction-values:
  - row
  - row-reverse
  - column
  - column-reverse
flex-wrap-values:
  - nowrap
  - wrap
  - wrap-reverse
justify-content-values:
  - flex-start
  - flex-end
  - center
  - space-between
  - space-around
  - space-evenly
  - start
  - end
  - left
  - right
align-content-values:
  - flex-start
  - flex-end
  - center
  - space-between
  - space-around
  - space-evenly
  - stretch
  - start
  - end
  - baseline
align-items-values:
  - stretch
  - flex-start
  - flex-end
  - center
  - baseline
  - start
  - end
  - self-start
  - self-end
align-self-values:
  - auto
  - flex-start
  - flex-end
  - center
  - baseline
  - stretch
---

<div class="content">
  <p>
    Combined with <code>is-flex</code>, all of the
    <strong>Flexbox CSS properties</strong> are available as Bulma helpers:
  </p>
  <ul>
    <li><code>flex-direction</code></li>
    <li><code>flex-wrap</code></li>
    <li><code>justify-content</code></li>
    <li><code>align-content</code></li>
    <li><code>align-items</code></li>
    <li><code>align-self</code></li>
    <li><code>flex-grow</code></li>
    <li><code>flex-shrink</code></li>
  </ul>
</div>

{% include docs/elements/anchor.html name="Flex direction" %} {% include
docs/elements/flexbox-helper-table.html property="flex-direction"
values=page.flex-direction-values %} {% include docs/elements/anchor.html
name="Flex wrap" %} {% include docs/elements/flexbox-helper-table.html
property="flex-wrap" values=page.flex-wrap-values %} {% include
docs/elements/anchor.html name="Justify content" %} {% include
docs/elements/flexbox-helper-table.html property="justify-content"
values=page.justify-content-values %} {% include docs/elements/anchor.html
name="Align content" %} {% include docs/elements/flexbox-helper-table.html
property="align-content" values=page.align-content-values %} {% include
docs/elements/anchor.html name="Align items" %} {% include
docs/elements/flexbox-helper-table.html property="align-items"
values=page.align-items-values %} {% include docs/elements/anchor.html
name="Align self" %} {% include docs/elements/flexbox-helper-table.html
property="align-self" values=page.align-self-values %} {% include
docs/elements/anchor.html name="Flex grow and flex shrink" %}

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Property: Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">Grow</th>
    </tr>
    {% for i in (0..5) %}
    <tr>
      <td>
        <code>is-flex-grow-{{ i }}</code>
      </td>
      <td>
        <code>flex-grow: {{ i }}</code>
      </td>
    </tr>
    {% endfor %}
    <tr>
      <th colspan="2">Shrink</th>
    </tr>
    {% for i in (0..5) %}
    <tr>
      <td>
        <code>is-flex-shrink-{{ i }}</code>
      </td>
      <td>
        <code>flex-shrink: {{ i }}</code>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>