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>