Давай пройдемся по всем основным свойствам Flexbox и убедимся, что все они описаны.
Свойства Flex-контейнера
- display
.container {
display: flex; /* или inline-flex */
}
- flex-direction
.container {
flex-direction: row; /* row, row-reverse, column, column-reverse */
}
- flex-wrap
.container {
flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
}
- flex-flow
.container {
flex-flow: row wrap; /* сочетание flex-direction и flex-wrap */
}
- justify-content
.container {
justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
}
- align-items
.container {
align-items: stretch; /* stretch, flex-start, flex-end, center, baseline */
}
- align-content
.container {
align-content: stretch; /* stretch, flex-start, flex-end, center, space-between, space-around */
}
Свойства Flex-элементов
- order
.item {
order: 0; /* любое целое число, по умолчанию 0 */
}
- flex-grow
.item {
flex-grow: 0; /* любое положительное число, по умолчанию 0 */
}
- flex-shrink
.item {
flex-shrink: 1; /* любое положительное число, по умолчанию 1 */
}
- flex-basis
.item {
flex-basis: auto; /* значение auto или любой размер (px, %, em, и т.д.) */
}
- flex
.item {
flex: 0 1 auto; /* сокращенное свойство для flex-grow, flex-shrink и flex-basis */
}
- align-self
.item {
align-self: auto; /* auto, flex-start, flex-end, center, baseline, stretch */
}
Теперь давай добавим несколько примеров для иллюстрации.
Примеры
Пример 4: Использование всех свойств Flex-контейнера
<div class="container">
<div class="item">Игрушка 1</div>
<div class="item">Игрушка 2</div>
<div class="item">Игрушка 3</div>
</div>
.container {
display: flex;
flex-direction: row; /* Располагаем игрушки в ряд */
flex-wrap: wrap; /* Позволяем игрушкам переноситься на новую строку */
justify-content: space-between; /* Равномерно распределяем игрушки по горизонтали */
align-items: center; /* Выравниваем игрушки по центру по вертикали */
align-content: stretch; /* Растягиваем строки игрушек по вертикали */
}
Пример 5: Использование всех свойств Flex-элементов
<div class="container">
<div class="item" style="order: 3; flex-grow: 2; flex-shrink: 1; flex-basis: 100px; align-self: flex-start;">Игрушка 1</div>
<div class="item" style="order: 1; flex-grow: 1; flex-shrink: 2; flex-basis: 150px; align-self: flex-end;">Игрушка 2</div>
<div class="item" style="order: 2; flex-grow: 3; flex-shrink: 0; flex-basis: 200px; align-self: center;">Игрушка 3</div>
</div>
.container {
display: flex;
}
Заключение
Мы рассмотрели все основные свойства Flexbox для flex-контейнеров и flex-элементов. Теперь ты знаешь, как использовать эти свойства, чтобы создать гибкие и адаптивные макеты на веб-страницах. Продолжай экспериментировать с различными комбинациями свойств, чтобы лучше понять, как они работают вместе.