2. sds-flex Implementation

Summarized Flex property for Sipster Layout System

To use this mixin, you must consider the the four basic CSS properties to use flex:

1. display: flex

2. flex-direction: row | column

3. justify-content: flex-start | center | flex-end | space-around | space-between

4. align-items: flex-start | center | flex-end

Knowing that, this would be the mixin for the developers to use in their code:

@include sds-flex("justify-content", "align-items", "flex-direction");

In this mixin can be found three params. The first two,justify content andalign-items, are mandatory params, and they have to be replaced by any of the available values listed above. flex-direction is an optional param inside the mixin, having by default the row value assigned.

Examples

sds-flex mixin using flex-direction param with its default value row:

@include sds-flex (center, center);

sds-flex mixin using flex-direction param personalized with column:

@include sds-flex (flex-end, center, column);