> For the complete documentation index, see [llms.txt](https://nextgencss.gitbook.io/untitled/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextgencss.gitbook.io/untitled/utilities/flex.md).

# Flex

## Flex

To set `display:flex;` use `.flex` class

Some properties in flex

* `.flex-item`
* `.flex-row`
* `.flex-col`
* `.flex-wrap`
* `.flex-start`
* `.flex-end`
* `.flex-center`
* `.flex-stretch`
* `.flex-space`

## Compiled as

```scss
//flex - box
.flex {
    display: flex;
    .flex-item {
        flex: 1;
    }
    .flex-row{
        flex-direction: row;
    }
    .flex-col{
        flex-direction: column;
    }
    .flex-wrap{
        flex-wrap: wrap;
    }
    .flex-start{
        justify-content: flex-start;
    }
    .flex-end{
        justify-content: flex-end;
    }
    .flex-center{
        justify-content: center;
    }
    .flex-stretch{
        justify-content: stretch;
    }
    .flex-space{
        justify-content: space-around;
    }
}

```