Flex
Utilize the power of Flexbox to create a wide range of layouts.
This component uses Flexbox, a concept that is still quite new but extremely powerful for creating layouts.
Usage
To apply this component, just add the .f-flex
class to a <div>
element. This will create the flex container. By default, all flex items will be aligned to the left and equally matched in height and width.
Example
Markup
<div class="f-flex">
<div>...</div>
</div>
Flex inline
By default, the flex container is displayed as a block element. To apply the behavior of an inline element while still laying out its content according to the flexbox model, use the .f-flex-inline
class instead of f-flex
.
Modifiers
You can add a number of different classes to modify the flex behavior.
Alignment
These classes define the horizontal and vertical alignment of flex items and distribute the space between them.
Class | Description |
---|---|
.f-flex-center |
Add this class to center flex items horizontally. |
.f-flex-right |
Add this class to align flex items to the right. |
.f-flex-top |
Add this class to align flex items to the top. |
.f-flex-middle |
Add this class to vertically center flex items. |
.f-flex-bottom |
Add this class to align flex items to the bottom. |
.f-flex-space-between |
Add this class to distribute items evenly, with the first item at the beginning and last item at the end of the main axis. |
.f-flex-space-around |
Add this class to distribute items evenly with equal space on both sides of each item. |
Example
Markup
<div class="f-flex f-flex-middle f-flex-center f-flex-space-between">...</div>
Flex item Alignment
Use these classes to align individual flex items, overriding the flex item group.
Class | Description |
---|---|
.f-flex-self-bottom |
Align self, flex end. |
.f-flex-self-top |
Align self, flex start. |
.f-flex-self-middle |
Align self, center. |
.f-flex-self-baseline |
Align self, baseline. |
.f-flex-self-left |
Applies auto margin to right. |
.f-flex-self-right |
Applies auto margin to left. |
.f-flex-self-to-top |
Applies auto margin to bottom. |
.f-flex-self-to-bottom |
Applies auto margin top. |
Direction
These classes define the axis flex items placed on and their direction. By default, items run horizontally from left to right.
Class | Description |
---|---|
.f-flex-row-reverse |
Add this class to lay out flex items from right to left. |
.f-flex-column |
Add this class to lay out flex items as vertical columns. |
.f-flex-column-reverse |
Add this class to lay out flex items from bottom to top. |
Example
Markup
<div class="f-flex f-flex-column f-flex-column-reverse">...</div>
Wrap
By default, flex items fit themselves into one row. Add the .f-flex-wrap
class, so that the items wrap into another row when they no longer fit the viewport. To change the items' direction so that they run from right to left, add the .f-flex-wrap-reverse
class. The following classes modify the alignment of wrapping flex items.
Class | Description |
---|---|
.f-flex-nowrap | Don't wrap the flex items. |
.f-flex-wrap | Wrap the flex items. |
.f-flex-wrap-reverse | Wrap the flex items in reverse. |
.f-flex-wrap-top |
Add this class to align multirow flex items to the top. |
.f-flex-wrap-middle |
Add this class to vertically center multirow flex items. |
.f-flex-wrap-bottom |
Add this class to align multiline flex items to the bottom. |
.f-flex-wrap-space-between |
Add this class to distribute item rows evenly, with the first row at the top and last row at the bottom of the container. |
.f-flex-wrap-space-around |
Add this class to distribute rows evenly with equal space at the top and bottom of each row. |
Example
Markup
<div class="f-flex f-flex-wrap f-flex-wrap-reverse f-flex-wrap-space-around">...</div>
Item order
By default, flex items are laid out according to the source order. To display a certain item as the first or last one, just add one of these classes.
Class | Description |
---|---|
.f-flex-order-first |
Displays the item as the first one. |
.f-flex-order-last |
Displays the item as the last one. |
.f-flex-order-first-small .f-flex-order-last-small |
Affects device widths of 480px and higher. |
.f-flex-order-first-medium .f-flex-order-last-medium |
Affects device widths of 768px and higher. |
.f-flex-order-first-large .f-flex-order-last-large |
Affects device widths of 960px and higher. |
.f-flex-order-first-xlarge .f-flex-order-last-xlarge |
Affects device widths of 1220px and higher. |
Example
Markup
<div class="f-flex">
<div class="f-flex-order-first">...</div>
</div>
Item dimensions
To determine how much space a flex item should take up, add one of the following classes to the item.
Class | Description |
---|---|
.f-flex-item-none |
The box's size is determined by its content. |
.f-flex-item-auto |
The space is allocated considering the item's content. |
.f-flex-item-1 |
The space is allocated solely based on flex. |
.f-flex-grow |
Fill out the widths of a group of child flex items. Apply this to a parent of child flex items |
Flex and grid
The Flex component can be combined with a grid from the Grid component.
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Markup
<div class="f-grid f-flex-middle" data-f-grid-margin>
<div class="f-width-medium-1-3">
<div class="f-panel"><img src="/images/placeholder_400x250.svg" alt="Placeholder"></div>
</div>
<div class="f-width-medium-2-3 f-flex-middle">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>