Flexbox Utilities
Flexbox utility classes and mixins to make working with flexbox easier.
Flexbox Utilities
Flexbox makes horizontal and vertical alignment painless, through the CSS properties align-items, align-self, and justify-content. Foundation includes a handful of classes for these properties, which work with any flexbox-enabled component.
To understand how these classes work, you need to understand the parent-child relationship created with flexbox. An element with display: flex is a flex parent, and can horizontally or vertically align its children. All immediate children of the flex parent are flex children. A flex child can vertically align itself.
In the below examples we are using [XY Grid](xy-grid.html) classes instead of [Legacy Flex Grid's](flex-grid.html) row and column. These examples will work for row and column but then again the Legacy Flex Grid will be deprecated from Foundation 7 so we recommend to use XY Grid.
Here's a basic example: when using the grid, a grid-x or grid-y is a flex parent, and a cell is a flex child. Use grid-margin-x or grid-padding-x for adding gutters
<div class="grid-x grid-padding-x">
<div class="cell small-4">Cell 1</div>
<div class="cell small-4">Cell 2</div>
<div class="cell small-4">Cell 3</div>
</div>Horizontal Alignment
Horizontal alignment classes are applied to flex parents. Left alignment is the default, but you can use one of these classes to change this:
.align-right.align-center.align-justify.align-spaced
<div class="grid-x grid-padding-x"> <!-- Aligned to the left -->
<div class="cell small-4">Aligned to</div>
<div class="cell small-4">the left</div>
</div>
<div class="grid-x grid-padding-x align-right"> <!-- Aligned to the right -->
<div class="cell small-4">Aligned to</div>
<div class="cell small-4">the right</div>
</div>
<div class="grid-x grid-padding-x align-center"> <!-- Aligned to the center -->
<div class="cell small-4">Aligned to</div>
<div class="cell small-4">the center</div>
</div>
<div class="grid-x grid-padding-x align-justify"> <!-- Aligned to the edges -->
<div class="cell small-4">Aligned to</div>
<div class="cell small-4">the edges</div>
</div>
<div class="grid-x grid-padding-x align-spaced"> <!-- Aligned to the space around -->
<div class="cell small-4">Aligned to</div>
<div class="cell small-4">the space around</div>
</div>You might be wondering what the difference between .align-justify and .align-spaced is. A justified grid (justify-content: space-between) evenly distributes the space between each column. The first and last columns pin to the edge of the grid.
A spaced grid (justify-content: space-around) evenly distributes the space around each column. This means there will always be space to the left of the first column, and to the right of the last column.
The horizontal alignment classes are shorthands for the justify-content CSS property. Learn more about justify-content.
Vertical Alignment
Vertical alignment can be applied to a flex parent—which will align all the children automatically—or to a flex child, which will align only that element.
Stretch alignment is the default. To set parent alignment, use these classes:
.align-top.align-middle.align-bottom.align-stretch
Note that with vertical alignment, we use the term "middle" for the midpoint, while with horizontal alignment, we use the term "center". As we can't have two CSS classes with the same name, thus we are using different terms.
<div class="grid-x grid-padding-x align-top">
<div class="cell small-4">I'm at the top (default)</div>
<div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div><div class="grid-x grid-padding-x align-middle">
<div class="cell small-4">I'm in the middle</div>
<div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div><div class="grid-x grid-padding-x align-bottom">
<div class="cell small-4">I'm at the bottom</div>
<div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div><div class="grid-x grid-padding-x align-stretch">
<div class="cell small-4">These cells have the same height</div>
<div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>To align an individual child, use the below classes. They use the same alignment terms as the parent-level classes, but the classes start with .align-self- instead of .align-.
.align-self-top.align-self-middle.align-self-bottom.align-self-stretch
<div class="grid-x grid-padding-x">
<div class="cell small-3 align-self-bottom"><div class="demo">Align bottom</div></div>
<div class="cell small-3 align-self-middle"><div class="demo">Align middle</div></div>
<div class="cell small-3 align-self-stretch"><div class="demo">Align stretch</div></div>
<div class="cell small-3 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
</div>Central Alignment
Central alignment can be applied to a flex parent, which will centrally align all children horizontally and vertically automatically. To set this to your layout, simply use the class: .align-center-middle.
We are using `.text-center` class just for demo purposes here.
<div class="grid-x grid-padding-x align-center-middle text-center" style="height: 200px;">
<div class="cell small-4">I am in the center-middle</div>
<div class="cell small-4">I am also centrally located</div>
</div>Vanilla Flexbox Helper Classes
Foundation also includes some helper classes for quickly applying flex container & direction attributes to elements.
To make something a flex container, simply apply
.flex-container
And to change its flex direction from row to column you can use the helper classes:
.flex-dir-row(default).flex-dir-row-reverse.flex-dir-column.flex-dir-column-reverse
For children, there are 3 quick helper classes to apply the flex property. These control how the containers take up space relative to their siblings:
.flex-child-auto(auto size flex child).flex-child-grow(flex child that will grow to take up all possible space).flex-child-shrink(flex child that will shrink to minimum possible space)
<div class="grid-x grid-padding-x">
<div class="cell small-4 flex-container flex-dir-column">
<div class="callout primary flex-child-auto">Auto</div>
<div class="callout primary flex-child-auto">Auto</div>
<div class="callout primary flex-child-shrink">Shrink</div>
</div>
<div class="cell small-4">
</div>
<div class="cell small-4 align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
</div>Responsive Classes
All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints.
These vanilla flexbox helper classes also have an optional mobile first responsive classes so that setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint.. Example: class="flex-child-shrink large-flex-child-auto" will be shrink on the small and medium breakpoints and then auto on large.
These optional responsive classes can be disabled by setting $flexbox-responsive-breakpoints to false. See here
<div class="grid-x grid-padding-x">
<div class="cell small-12 flex-container flex-dir-column large-flex-dir-row">
<div class="callout primary flex-child-auto">Auto</div>
<div class="callout primary flex-child-auto">Auto</div>
<div class="callout primary flex-child-shrink large-flex-child-auto">Auto on Large</div>
</div>
<div class="cell small-12 align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
</div>Source Ordering
Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.
The CSS property is easy enough to remember.
.element {
order: 1;
}Columns within a row will be sorted by their order property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.
We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.
Watch this part in video
<div class="grid-x grid-padding-x">
<div class="cell small-6 small-order-2 medium-order-1">
This column will come second on small, and first on medium and larger.
</div>
<div class="cell small-6 small-order-1 medium-order-2">
This column will come first on small, and second on medium and larger.
</div>
</div>Helper Mixins
If you're using the Sass version of Foundation, you can access the above helpers as mixins as well.
For parent-level alignment, use flex-align(). You can pass in a horizontal alignment ($x), vertical alignment ($y), or both.
.container {
@include flex-align($x: center, $y: stretch);
}For child-level alignment, use flex-align-self(). You can pass in any vertical alignment.
.sidebar {
@include flex-align-self(bottom);
}Interested in building your own flexbox-ey component? Use the flex() mixin to get started.
.flexish-thang {
@include flex;
@include flex-align(center, middle);
}Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$flex-source-ordering-count |
Number | 6 |
Default value for the count of source ordering` |
$flexbox-responsive-breakpoints |
Boolean | true |
Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers. |
$xy-grid |
Boolean | true |
Enables the XY grid. |
$grid-container |
Number | $global-width |
The maximum width of a grid container. |
$grid-columns |
Number | 12 |
The number of columns used in the grid. |
$grid-margin-gutters |
Map or Length |
"small": 20px |
The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map. |
$grid-padding-gutters |
Map or Length | $grid-margin-gutters |
The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map. |
$grid-container-padding |
Map or Length | $grid-padding-gutters |
The amount of padding to use when padding the grid-container. |
$grid-container-max |
Number | $global-width |
The maximum width to apply to a grid container |
$xy-block-grid-max |
Number | 8 |
The maximum number of cells in an XY block grid. |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
flex
@include flex;Enables flexbox by adding display: flex to the element.
flex-align
@include flex-align($x, $y);Horizontally or vertically aligns the items within a flex container.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$x |
Keyword | null |
Horizontal alignment to use. Can be |
$y |
Keyword | null |
Vertical alignment to use. Can be |
flex-align-self
@include flex-align-self($y);Vertically align a single column within a flex row. Apply this mixin to a flex column.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$y |
Keyword | null |
Vertical alignment to use. Can be |
flex-order
@include flex-order($order);Changes the source order of a flex child. Children with lower numbers appear first in the layout.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$order |
Number | 0 |
Order number to apply. |
flex-direction
@include flex-direction($direction);Change flex-direction
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$direction |
Keyword | row |
Flex direction to use. Can be
|
xy-grid-frame
@include xy-grid-frame($vertical, $nested, $gutters, $breakpoint, $include-base);Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$vertical |
Boolean | false |
Is grid vertical or horizontal. Should match grid. |
$nested |
Boolean | false |
Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh. |
$gutters |
Number or Map | null |
Map or single value for gutters. |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. |
$include-base |
Boolean | true |
Include the base styles that don't vary per breakpoint. |
xy-cell-block
@include xy-cell-block($vertical);Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$vertical |
Boolean | false |
Is grid vertical or horizontal. Should match grid. |
xy-cell-block-container
@include xy-cell-block-container;Container for inside a grid frame containing multiple blocks. Typically used
as a modifier for a .cell to allow the cell to pass along flex sizing
constraints / from parents to children.
xy-cell-base
@include xy-cell-base($size);Sets base flex properties for cells.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Keyword | full |
The size of your cell. Accepts |
xy-cell-reset
@include xy-cell-reset($vertical);Resets a cells width (or height if vertical is true) as well as strips its gutters.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$vertical |
Boolean | false |
Set to true to output vertical (height) styles rather than widths. |
xy-cell-size
@include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);Sets sizing properties for cells.
Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Keyword or Number | full |
The size of your cell. Can be |
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Type of gutter to output. Accepts |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If |
$vertical |
Boolean | false |
Set to true to output vertical (height) styles rather than widths. |
xy-cell-gutters
@include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);Sets gutters properties for cells.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Type of gutter to output. Accepts |
$gutter-position |
List | null |
The position to apply gutters to. Accepts |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If |
$vertical |
Boolean | false |
Direction of the gutters to output. See |
xy-cell
@include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);Creates a cell for your grid.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Keyword or Number | full |
The size of your cell. Can be |
$gutter-output |
Boolean | null |
[DEPRECATED] Whether or not to output gutters. |
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Type of gutter to output. Accepts |
$gutter-position |
List | null |
The position to apply gutters to. Accepts |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If |
$vertical |
Boolean | false |
Set to true to output vertical (height) styles rather than widths. |
$output |
List | base size gutters |
Cell parts to output. You will need to generate others parts of the cell seperately, it may not work properly otherwise. |
xy-cell-static
Deprecated in v6.6.0
@include xy-cell-static($size, $gutter-output, $gutters, $gutter-type, $breakpoint, $vertical);Creates a single breakpoint sized grid. Used to generate our grid classes.
xy-cell-static() is deprecated and will be removed.
Use xy-cell() instead with $output: (size gutters) to not generate the cell base.
See migration notes at https://git.io/foundation-6-6-0
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Keyword or Number | full |
The size of your cell. Can be |
$gutter-output |
Boolean | true |
Whether or not to output gutters. Always |
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Map or single value for gutters. |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If using with the |
$vertical |
Boolean | false |
Set to true to output vertical (height) styles rather than widths. |
xy-grid-collapse
@include xy-grid-collapse($selector, $gutter-type, $gutter-position, $min-breakpoint);Collapses the grid a cells within it.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$selector |
String | .cell |
The child element to remove the gutter from. |
$gutter-type |
Keyword | margin |
The type of gutter to remove. |
$gutter-position |
List | right left |
The positions to remove gutters from. Accepts |
$min-breakpoint |
Keyword | $-zf-zero-breakpoint |
Minimum breakpoint in |
xy-grid-container
@include xy-grid-container($width, $padding);Creates a max width container, designed to house your grid content.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$width |
Number | $grid-container |
a width to limit the container to. |
$padding |
Number | $grid-container-padding |
paddings of the container. |
xy-grid
@include xy-grid($direction, $wrap);Creates a container for your flex cells.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$direction |
Keyword | horizontal |
Either horizontal or vertical direction of cells within. |
$wrap |
Boolean | true |
If the cells within should wrap or not. |
xy-gutters
@include xy-gutters($gutters, $gutter-type, $gutter-position, $negative);Create gutters for a cell/container.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Type of gutter to output. Accepts either margin or padding. |
$gutter-position |
List | right left |
The position to apply gutters to. Accepts |
$negative |
Boolean | false |
Whether to apply the gutter as a negative value. Commonly used for nested grids. |
xy-grid-layout
@include xy-grid-layout($n, $selector, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);Sizes child elements so that $n number of items appear on each row.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$n |
Number | None |
Number of elements to display per row. |
$selector |
String | '.cell' |
Selector(s) to use for child elements. |
$gutter-output |
Boolean | null |
[DEPRECATED] Whether or not to output gutters. |
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Type of gutter to output. Accepts |
$gutter-position |
List | null |
The position to apply gutters to. Accepts |
$breakpoint |
String | null |
The breakpoint to use for the cell generation. If using with the |
$vertical |
Boolean | false |
Set to true to output vertical (height) styles rather than widths. |
$output |
List | base size gutters |
Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise. |
xy-cell-offset
@include xy-cell-offset($n, $gutters, $gutter-type, $breakpoint, $vertical);Offsets a column to the right/bottom by $n columns.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$n |
Number or List | None |
Size to offset by. You can pass in any value accepted by the |
$gutters |
Number or Map | $grid-margin-gutters |
Map of gutters or single value to use for responsive gutters. |
$gutter-type |
Keyword | margin |
The type of gutter to use. Can be |
$breakpoint |
Number or Array or Keyword | null |
Breakpoint to use for |
$vertical |
Boolean | false |
Sets the direction of the offset. If set to true will apply margin-top instead. |
Functions
xy-cell-base
xy-cell-base($size)Returns the appropriate CSS flex value for a cell base.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Keyword | full |
The size of your cell. Accepts |
xy-cell-gutters
xy-cell-gutters($gutters, $breakpoint)Calculate the size of a cell gutters.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If |
xy-cell-size
xy-cell-size($size)Returns the percentage size of a cell.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Number or List | $grid-columns |
Size to make the cell. You can pass a value in multiple formats, such as |
xy-cell-size-css
xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint)Returns the appropriate CSS value for a cell size.
Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$size |
Keyword or Number | full |
The size of your cell. Can be |
$gutters |
Number or Map | $grid-margin-gutters |
Map or single value for gutters. |
$gutter-type |
Keyword | margin |
Type of gutter to output. Accepts |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If |
xy-cell-offset
xy-cell-offset($n, $gutters, $gutter-type, $breakpoint)Returns the appropriate CSS value to offset a cell.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$n |
Number or List | None |
Size to offset by. You can pass in any value accepted by the |
$gutters |
Number or Map | $grid-margin-gutters |
Map of gutters or single value to use for responsive gutters. |
$gutter-type |
Keyword | margin |
The type of gutter to use. Can be |
$breakpoint |
String | null |
The name of the breakpoint size in your gutters map to get the size from. If using with the |