# Flexbox
These utility classes allow you to use flex properties in your html without writing css
# How to
While you may still prefer to use css for more complex composition, this can be helpful for functional modification on the fly.[1]
Flexbox utility classes can be applied to any element to apply flexbox properties.
To use these styles in a Vue component SCSS, you'll need:
@import '~@skyline/scss/src/core/UI.required';
@import '~@skyline/scss/src/utilities/utilities.flex';
# HTML Example:
<div class="u-flex u-flex-column u-justify-center">
<div>Example of</div>
<div>flexed content</div>
</div>
# Display
Use class="u-flex" to apply the default flex.
Use class="u-inline-flex" to apply inline flex.
Use class="u-flex-auto" with caution. This is equivalent to flex: 1 1 auto.
Beware, this is not the default value. It sizes the item based on its
width/height properties, but makes it fully flexible so that they absorb any
extra space along the main axis.
class="u-flex-none" is equivalent to flex: 0 0 auto. It sizes the item
according to its width/height properties, but makes it fully inflexible. This is
similar to flex: initial except it is not allowed to shrink, even in an overflow
situation.
# Direction
Flexbox is, aside from optional wrapping, a single-direction layout concept. Think of flex items as responsible for laying out flexed children elements either in horizontal rows or vertical columns.
The direction property describes the main-axis that flex items are placed in the parent flex container. Either horizontal (flex-row) or vertical (flex-column).
When you set direction to row-reverse or column-reverse, the flow direction becomes opposite to the text direction. Text direction for Benevity products only includes left-to-right languages (opens new window)).
class="u-flex-row" (default) horizontal rows
class="u-flex-row-reverse" horizontal rows, flow is reversed
class="u-flex-column" vertical columns
class="u-flex-column-reverse" vertical, flow is reversed
class="u-flex-wrap" By default, flex items will try to fit on one line.
Use this property to allow items to wrap.
# Align Items
Defines the default behavior for how flex items are laid out on the cross axis of the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
class="u-items-stretch" (default) stretch to fill the container (still respect
min-width/max-width)
class="u-items-start" cross-start margin edge of the items is placed on the
cross-start line
class="u-items-end" cross-end margin edge of the items is placed on the
cross-end line
class="u-items-center" items are centered in the cross-axis
class="u-items-baseline" items are aligned such as their baselines align
# Justify Content
This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
class="u-justify-start" (default) items are packed toward the start line
class="u-justify-end" items are packed toward to end line
class="u-justify-center" items are centered along the line
class="u-justify-between" items are evenly distributed in the line; first item
is on the start line, last item on the end line
class="u-justify-around" items are evenly distributed in the line with equal
space around them. Note that visually the spaces aren't equal, since all the
items have equal space on both sides. The first item will have one unit of space
against the container edge, but two units of space between the next item because
that next item has its own spacing that applies.
# Align Content
This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
class="u-content-stretch" (default): lines stretch to take up the remaining
space
class="u-content-start" lines packed to the start of the container
class="u-content-end" lines packed to the end of the container
class="u-content-center" lines packed to the center of the container
class="u-content-between" lines evenly distributed; the first line is at the
start of the container while the last one is at the end
class="u-content-around" lines evenly distributed with equal space around each
line
# Align Self
These properties can be attached to the children themselves (ie not the parent flex container). This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
class="u-self-stretch" (default) stretch to fill the container (still respect
min-width/max-width)
class="u-self-start" cross-start margin edge of the items is placed on the
cross-start line
class="u-self-end" cross-end margin edge of the items is placed on the
cross-end line
class="u-self-center" items are centered in the cross-axis
class="u-items-baseline" items are aligned such as their baselines align
# Order
These properties can be attached to the children themselves (ie not the parent flex container). By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
class="u-order-0"
class="u-order-1"
class="u-order-2"
class="u-order-3"
class="u-order-4"
class="u-order-5"
class="u-order-6"
class="u-order-7"
class="u-order-8"
class="u-order-last" adds an extreme order to 'hack' it to last
Yes, this has been largely stolen from Everyone's Favourite CSS Tricks Flexbox Article (opens new window). Thanks to CSS Tricks for having the best licensing ever. ↩︎