# flex

[component-header:sl-flex]

flex is a layout system, with columns, making it easier to layout and align content.

```html preview
<sl-flex sl-gap="2" style="width:50px">
  <sl-button sl-basis="auto" sl-shrink="1">1</sl-button>
  <sl-button sl-basis="auto" sl-grow="0" sl-shrink="3">2</sl-button>
</sl-flex>
```

## Examples

### Flex Direction
The flex-[Value] defines in which direction the container wants to stack the flex items(row or column).
```html preview
<sl-flex sl-gap="9" flex-column flex-wrap items-flex-end>
  <sl-button >1</sl-button>
  <sl-button >2</sl-button>
</sl-flex>
```

### Flex Wrap
The flex-[Value] property specifies whether the flexible items should wrap or not.
```html preview
<sl-flex sl-gap-x="8" sl-gap-y="3" flex-nowrap>
  <sl-button sl-basis="1" sl-shrink="8">1</sl-button>
  <sl-button sl-basis="1" sl-shrink="10">2</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">3</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">4</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">5</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">6</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">7</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">8</sl-button>
  <sl-button sl-basis="1" sl-shrink="10">9</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">10</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">11</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">12</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">13</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">14</sl-button>
  <sl-button sl-basis="1" sl-shrink="8">15</sl-button>
  <sl-button sl-basis="4" sl-shrink="2">16</sl-button>
</sl-flex>
```

### Justify Content and Align Content / Items
Justification and alignment is specified in the [Box Alignment Page](../grid/box-alignment.md)

### Gap
[For more information on gap, visit here.](../grid/gap.md)

### Flex basis | shrink
The sl-basis=[Value] (flex-basis) property specifies the initial length of a flexible item.
The sl-shrink=[Value] (flex-shrink) property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
```html preview
<sl-flex sl-gap-x="1" sl-gap-y="3" flex-wrap style="width:200px;">
  <sl-button sl-basis="2" sl-shrink="6">1</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">2</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">3</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">4</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">5</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">6</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">7</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">8</sl-button>
</sl-flex>
```

### Flex basis | grow
The sl-grow=[Value] (flex-grow) property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
```html preview
<sl-flex sl-gap-x="1" sl-gap-y="3" flex-wrap>
  <sl-button sl-basis="2" sl-shrink="6">1</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">2</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">3</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">4</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">5</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">6</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">7</sl-button>
  <sl-button sl-basis="9" sl-shrink="1">8</sl-button>
</sl-flex>
```

## Properties

### Container
| Name | Description |
|------|-------------|
| flex-[row/column] | Direction of the flex |
| flex-[wrap/wrap-reverse/nowrap] | To wrap flex items onto new lines, creating new rows if flex-direction is row and new columns if flex-direction is column |

### Nested(Items)
| Name | Description |
|------|-------------|
| flex-grow | How much of the positive free space does this item get |
| flex-shrink | How much negative free space can be removed from this item |
| flex-basis | What is the size of the item before growing and shrinking happens |
|align-self-[Value]| The align-self property overrides align-items on individual items.(Values: auto, flex-start, flex-end, center, baseline, stretch.)[For more information on Align self, visit MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) |

[component-metadata:sl-flex]