Flex Objects

Version: 0.9.0

Edit

Creates a flex container and sets default flex value for flex items.

Flex Object

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/flex-objects.scss#L11

Flex item

<!-- flex object -->
<div class="o-flex">
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
</div>

Flex Item Grow

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/flex-objects.scss#L48

Flex item

<!-- flex item grow -->
<div class="o-flex">
  <div class="o-flex__item o-flex__item--grow">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item o-flex__item--grow">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
  <div class="o-flex__item">
    <p>Flex item</p>
  </div>
</div>