# Flex

#### Flex Basis Classes

**`.flex-basis-{number}`**

Sets the flex basis of the element.

CSS equivalent: `flex-basis: {number}px;`

Example usage:

```html
<div class="flex-basis-200">This element has a flex basis of 200 pixels.</div>
```

#### Flex Grow Classes

***

**`.flex-grow-{number}`**

Sets the flex grow factor of the element.

CSS equivalent: `flex-grow: {number};`

Example usage:

```html
<div class="flex-grow-2">This element has a flex grow factor of 2.</div>
```

#### Flex Shrink Classes

***

**`.flex-shrink-{number}`**

Sets the flex shrink factor of the element.

CSS equivalent: `flex-shrink: {number};`

Example usage:

```html
<div class="flex-shrink-3">This element has a flex shrink factor of 3.</div>
```

Certainly! Here's the documentation for the flex utility classes related to flex direction:

#### Flex Direction Classes

***

**`.flex-row`**

Sets the flex direction to row.

CSS equivalent: `flex-direction: row;`

Example usage:

```html
<div class="flex-row">This element has a flex direction of row.</div>
```

***

**`.flex-col`**

Sets the flex direction to column.

CSS equivalent: `flex-direction: column;`

Example usage:

```html
<div class="flex-col">This element has a flex direction of column.</div>
```

These classes allow you to easily control the direction of flex items within a flex container. By using the `.flex-row` class, you can arrange the items horizontally in a row, and with the `.flex-col` class, you can stack the items vertically in a column.

Certainly! Here's the documentation for the flex utility classes related to flex wrapping:

#### Flex Wrap Classes

***

**`.flex-nowrap`**

Prevents flex items from wrapping to the next line.

CSS equivalent: `flex-wrap: nowrap;`

Example usage:

```html
<div class="flex-nowrap">This element prevents flex items from wrapping.</div>
```

***

**`.flex-wrap`**

Allows flex items to wrap to the next line if necessary.

CSS equivalent: `flex-wrap: wrap;`

Example usage:

```html
<div class="flex-wrap">This element allows flex items to wrap.</div>
```

***

**`.flex-reverse`**

Wraps flex items to the next line in reverse order.

CSS equivalent: `flex-wrap: wrap-reverse;`

Example usage:

```html
<div class="flex-reverse">This element wraps flex items to the next line in reverse order.</div>
```

***

These classes provide control over how flex items are displayed and wrapped within a flex container. The `.flex-nowrap` class prevents wrapping, while the `.flex-wrap` class allows wrapping, and the `.flex-reverse` class wraps items in reverse order.

If you have any more questions, feel free to ask!