Зміст курсу
Tailwind CSS for Web Development
Tailwind CSS for Web Development
Flexbox Utilities
Tailwind CSS provides utility classes that allow you to create flexible and responsive layouts using Flexbox easily. These utilities enable you to control the design and alignment of elements within a container.
Setting Display to Flex
To set an element to use Flexbox for its layout, you can use the flex class. This class sets the display property to flex.
index
index
index
In this example, the flex class on the parent div makes it a flex container, and the child divs (flex-1) will distribute space equally.
Controlling Flex Direction
Flex direction utilities allow you to control the direction in which the flex items are placed in the container. You can set the direction to row (default), column, row-reverse, or column-reverse using the following classes:
| Class | Description |
|---|---|
flex-row | Places items in a row (default). |
flex-col | Places items in a column. |
flex-row-reverse | Places items in a reversed row. |
flex-col-reverse | Places items in a reversed column. |
index
index
index
In this example, the flex-col class sets the flex direction to column, stacking items vertically.
Aligning Items Horizontally
The justify-content utilities control the horizontal alignment of items within a flex container. The available classes are:
| Class | Description |
|---|---|
justify-start | Aligns items to the start. |
justify-center | Aligns items to the center. |
justify-end | Aligns items to the end. |
justify-between | Distributes items evenly with space between them. |
justify-around | Distributes items evenly with space around them. |
justify-evenly | Distributes items evenly with equal space around them. |
index
index
index
In this example, the justify-center class centers the items horizontally within the flex container.
Aligning Items Vertically
The align-items utilities control the vertical alignment of items within a flex container. The available classes are:
| Class | Description |
|---|---|
items-start | Aligns items to the start. |
items-center | Aligns items to the center. |
items-end | Aligns items to the end. |
items-baseline | Aligns items along their baseline. |
items-stretch | Stretches items to fill the container (default). |
index
index
index
In this example, the items-center class vertically centers the items within the flex container.
Note
If you are looking for something specific, please follow the link.
Дякуємо за ваш відгук!
