---
description: Add Flexbox to projects using Sipster's sds-flex() mixin.
---

# 2. sds-flex()

As mentioned in the previous section, Sipster provides a custom SCSS mixin to simplify using Flexbox. To use the `sds-flex()` mixin, you first need to consider the four basic Flexbox properties:

<table><thead><tr><th width="212">Flex Property</th><th>Options</th></tr></thead><tbody><tr><td><code>display</code></td><td><code>flex</code></td></tr><tr><td><code>flex-direction</code></td><td><code>row</code> | <code>column</code></td></tr><tr><td><code>justify-content</code></td><td><code>flex-start</code> | <code>center</code> | <code>flex-end</code> | <code>space-around</code> | <code>space-between</code></td></tr><tr><td><code>align-items</code></td><td><code>flex-start</code> | <code>center</code> | <code>flex-end</code></td></tr></tbody></table>

With this in mind, the format for Sipster's mixin is:

```scss
@include sds-flex($justify, $align, $direction);
```

This mixin accepts three parameters (the `display` property is set automatically since this is required for the other flex properties to even work). The `$justify` and `$align` parameters are mandatory values based on the options in the table above. The `$direction` is optional and defaults to `row` if not specified.&#x20;

Because this is a mixin, it needs to be implemented at the same level as other properties for a CSS selector using `@include`.

#### Example:

```scss
// $direction not specified, so defaults to `row`
.customClass {
  @include sds-flex (center, center);
}

// specifying $direction as `column`
.anotherClass {
  @include sds-flex(flex-end, center, column);
}
```

#### Compiled CSS:

```css
/* $direction not specified, so defaults to `row` */
.customClass {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* specifying $direction as `column` */
.anotherClass {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
```
