📪Flex

Flex Basis Classes

.flex-basis-{number}

Sets the flex basis of the element.

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

Example usage:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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!