# 2. sds-flex Implementation

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:

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

In this mixin can be found three params. The first two,`justify content` and`align-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:`

```scss
@include sds-flex (center, center);
```

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-core/sds-tools/layout-system/flexbox/sds-flex-implementation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.