Flex API

This page describes how to use the attribute based flex APIs and supports three selectors: data-flex, data-flex-fill and data-flex-align.

data-flex attribute

The data-flex attribute can take the following values with their resulting CSS:

Value	CSS
<no value>	flex: 1 1 0;
auto	flex-basis: 100%;
grow	flex: 1 1 100%;
initial	flex: 0 1 auto;
none	flex: 0 0 auto;
nogrow	flex: 0 1 auto;
noshrink	flex: 1 0 auto;

Support for flex sizes

Additionally, you can generate flex size selectors using the mixins as shown in the following example. They will extend the data-flex attribute with numerical values, for example:

Selector	CSS
data-flex="<number>"	flex: 1 1 <number>%;
e.g. data-flex="30"	flex: 1 1 30%;

This can be used to give elements a width with the percentage of the numerical value in relation to their flex container.

@include fx.flex-size-attribute-selectors;
@include fx.flex-size-attribute-selectors-from-list(33 66);

The mixins can be configured with parameters to generate only the selectors you need. The first mixin can generate a range of selectors with a configurable start and end and a given increment.

The second mixin will generate only selectors for the numbers passed as the first argument.

Both mixins can generate selectors for the responsive API (e.g. data-flex-gt-sm="50")

data-flex-fill attribute

The data-flex-fill attribute can be used to make a child of a flex-container fill the entire container. It takes no arguments and adds the following properties to the element:

margin: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;

data-flex-align attribute

The data-flex-align attribute takes the following values with their resulting CSS:

Value	CSS
start	align-self: flex-start;
center	align-self: center;
end	align-self: flex-end;
baseline	align-self: baseline;
stretch	align-self: stretch;