Foundation CSS Flexbox Utilities Sass Reference

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.

Flexbox Utilities: In Foundation CSS, Flexbox classes are used to make horizontal and vertical alignments super easy. 

Sass Reference:

 

Variables

Name	Type	Default value	Description
$flex-source-ordering-count	Number	6	This variable is used to set the source order.
$flexbox-responsive-breakpoints	Boolean	True	This variable is used for quickly disabling/enabling Responsive breakpoints for Vanilla Flex Helpers.
$xy-grid	Boolean	True	This variable is used to enable the XY grid.
$grid-container	Number	$global-width	This variable is used for the maximum width of a grid container.
$grid-columns	Number	12	This variable is used for setting the number of columns.
$grid-margin-gutters	Map or Length	"small": 20px "medium": 30px	This variable is used for 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	This variable is used for 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	This variable is used for padding the grid container.
$grid-container-max	Number	$global-width	This variable is used to apply to the maximum width of the grid container.

Example 1: The following example demonstrates the flexbox utility of Foundation CSS.

SASS code:

$grid-margin-gutters:100px;

.item1{
 margin:$grid-margin-gutters;
 background-color: aqua;
}

.item2{
 margin:$grid-margin-gutters;
 background-color: burlywood;
}

CSS code:

.item1 {
 margin:100px;
 background-color:aqua;
}

.item2 {
 margin:100px;
 background-color:burlywood;
}

Output:

👁 Image

Example 2: The following also demonstrates another example of flexbox utilities.

SCSS code:

$grid-padding-gutters:50px;

.item1{
 padding:$grid-padding-gutters;
}

.item2{
 padding:$grid-padding-gutters;
 }

Compiled CSS code:

.item1 {
 padding:50px;
}

.item2 {
 padding:50px;
}

Output:

👁 Image

Reference link: https://get.foundation/sites/docs/flexbox-utilities.html