Керування Макетом за Допомогою Утиліт Flexbox
Tailwind CSS надає утилітні класи, які дозволяють легко створювати гнучкі та адаптивні макети за допомогою Flexbox. Ці утиліти дають змогу керувати дизайном і вирівнюванням елементів у контейнері.
Встановлення відображення Flex
Щоб задати елементу використання Flexbox для його макета, використовуйте клас flex. Цей клас встановлює властивість display у значення flex.
index.html
У цьому прикладі клас flex на батьківському елементі div робить його flex-контейнером, а дочірні елементи div (flex-1) рівномірно розподіляють простір.
Керування напрямком Flex
Утиліти напрямку flex дозволяють контролювати розташування flex-елементів у контейнері. Ви можете встановити напрямок як рядок (за замовчуванням), стовпець, зворотний рядок або зворотний стовпець за допомогою наступних класів:
| 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.html
У цьому прикладі клас flex-col встановлює напрямок flex у стовпець, розміщуючи елементи вертикально.
Вирівнювання елементів по горизонталі
Утиліти justify-content керують горизонтальним вирівнюванням елементів у flex-контейнері. Доступні класи:
| Class | Description |
|---|---|
justify-start | Вирівнює елементи на початок. |
justify-center | Вирівнює елементи по центру. |
justify-end | Вирівнює елементи в кінець. |
justify-between | Розподіляє елементи рівномірно з простором між ними. |
justify-around | Розподіляє елементи рівномірно з простором навколо них. |
justify-evenly | Розподіляє елементи рівномірно з однаковим простором навколо них. |
index.html
У цьому прикладі клас justify-center розташовує елементи по центру горизонтально всередині flex-контейнера.
Вертикальне вирівнювання елементів
Утиліти align-items керують вертикальним вирівнюванням елементів у flex-контейнері. Доступні класи:
| Class | Description |
|---|---|
items-start | Вирівнює елементи по верхньому краю. |
items-center | Вирівнює елементи по центру. |
items-end | Вирівнює елементи по нижньому краю. |
items-baseline | Вирівнює елементи по базовій лінії. |
items-stretch | Розтягує елементи на всю висоту контейнера (типово). |
index.html
У цьому прикладі клас items-center вертикально вирівнює елементи всередині flex-контейнера.
Примітка
Якщо ви шукаєте щось конкретне, скористайтеся посиланням.
1. Який клас встановлює властивість display у значення flex?
2. Як встановити напрямок flex у стовпець?
3. Який клас горизонтально вирівнює елементи у flex-контейнері?
4. Яка утиліта вирівнює елементи по вертикалі у flex-контейнері?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you show me an example of using these Tailwind Flexbox classes?
What are some common use cases for Flexbox in Tailwind CSS?
How do I combine multiple flex utilities for more complex layouts?
Awesome!
Completion rate improved to 3.57Керування Макетом за Допомогою Утиліт Flexbox
Свайпніть щоб показати меню
Tailwind CSS надає утилітні класи, які дозволяють легко створювати гнучкі та адаптивні макети за допомогою Flexbox. Ці утиліти дають змогу керувати дизайном і вирівнюванням елементів у контейнері.
Встановлення відображення Flex
Щоб задати елементу використання Flexbox для його макета, використовуйте клас flex. Цей клас встановлює властивість display у значення flex.
index.html
У цьому прикладі клас flex на батьківському елементі div робить його flex-контейнером, а дочірні елементи div (flex-1) рівномірно розподіляють простір.
Керування напрямком Flex
Утиліти напрямку flex дозволяють контролювати розташування flex-елементів у контейнері. Ви можете встановити напрямок як рядок (за замовчуванням), стовпець, зворотний рядок або зворотний стовпець за допомогою наступних класів:
| 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.html
У цьому прикладі клас flex-col встановлює напрямок flex у стовпець, розміщуючи елементи вертикально.
Вирівнювання елементів по горизонталі
Утиліти justify-content керують горизонтальним вирівнюванням елементів у flex-контейнері. Доступні класи:
| Class | Description |
|---|---|
justify-start | Вирівнює елементи на початок. |
justify-center | Вирівнює елементи по центру. |
justify-end | Вирівнює елементи в кінець. |
justify-between | Розподіляє елементи рівномірно з простором між ними. |
justify-around | Розподіляє елементи рівномірно з простором навколо них. |
justify-evenly | Розподіляє елементи рівномірно з однаковим простором навколо них. |
index.html
У цьому прикладі клас justify-center розташовує елементи по центру горизонтально всередині flex-контейнера.
Вертикальне вирівнювання елементів
Утиліти align-items керують вертикальним вирівнюванням елементів у flex-контейнері. Доступні класи:
| Class | Description |
|---|---|
items-start | Вирівнює елементи по верхньому краю. |
items-center | Вирівнює елементи по центру. |
items-end | Вирівнює елементи по нижньому краю. |
items-baseline | Вирівнює елементи по базовій лінії. |
items-stretch | Розтягує елементи на всю висоту контейнера (типово). |
index.html
У цьому прикладі клас items-center вертикально вирівнює елементи всередині flex-контейнера.
Примітка
Якщо ви шукаєте щось конкретне, скористайтеся посиланням.
1. Який клас встановлює властивість display у значення flex?
2. Як встановити напрямок flex у стовпець?
3. Який клас горизонтально вирівнює елементи у flex-контейнері?
4. Яка утиліта вирівнює елементи по вертикалі у flex-контейнері?
Дякуємо за ваш відгук!
