sunweb

Pack

object pack

Definition


The pack object simply causes any number of elements pack up horizontally to automatically fill an equal, fluid width of their parent.

o-pack
Lorem
Ipsum
Consecteur adisplicing
Elit lorem
      <div class="o-pack">
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
      </div>

Alignment modifiers


Sets the item vertical alignment.
The object alignment by default is top, but exist one modifier for each alignment (top, middle, bottom).

o-pack > o-pack--middle
Lorem
Ipsum
Consecteur adisplicing
Elit lipsum
      <div class="o-pack o-pack--top">
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
      </div>

Reverse modifier


Flips the whole layout

o-pack > o-pack--reverse
lorem
Ipsum
Consecteur adisplicing
Elit lorem
      <div class="o-pack o-pack--reverse">
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
      </div>

Auto modifier


Applies the `table-layout: auto` to the object and the items within.

o-pack > o-pack--auto
Lorem
Ipsum
Consecteur adisplicing
Elit lorem
      <div class="o-pack o-pack--auto">
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
        <div class="o-pack__item"></div>
      </div>