Flexbox

• src
• layout
• flexbox.scss

---

Class list

Flex containers

The classes specified above (except for .order-(value)-(breakpoint)) are to be applied to an element whose display property is set to flex, which becomes the flex container. These classes determine how to place the immediate children (flex items) of the flex container.

The classes without cross- affect items along the main axis, which is by default left to right with no wrapping.

The classes with cross- affect items along the cross axis (perpendicular to the main axis). By default the cross axis would be top to bottom.

Example

<div class="flex between cross-center">
    <button class="button h1">button</button>
    <small>Lorem ipsum dolor.</small>
    <span class="tag dark h4">tag</span>
</div>

Flex wrap

Use the .flex-wrap class on a flex container to have the flex items wrap onto new lines if they exceed the remaining width for the current line.

Flex items

The only classes that Sandbox provides for flex items are .order-(value)-(breakpoint). These classes allow the rearrangement of the flex items at specific breakpoints, so long as they are within a flex container.

The values that can be plugged into (value) are: 1, 2, 3, 4.

Plug in whichever breakpoint suffix you want to use into (breakpoint).

Example

<div class="flex grid">
    <div class="unit-12 order-2-md order-3-sm">
        <!-- content 1 -->
    </div>
    <div class="unit-12 order-3-md order-1-sm">
        <!-- content 2 -->
    </div>
    <div class="unit-12 order-1-md order-2-sm">
        <!-- content 3 -->
    </div>
</div>

More info

For more information on flexbox, check out this article.