📪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!
Last updated