6.1 Свойство flex-direction
Flexbox предоставляет гибкие и мощные средства для создания адаптивных макетов. Важной частью этой системы являются оси компоновки, которые определяют, как Flex-элементы будут располагаться внутри Flex-контейнера. Ниже мы подробно рассмотрим свойства flex-direction и flex-wrap, которые управляют направлением осей и поведением Flex-элементов при переполнении.
Свойство flex-direction определяет направление главной оси, вдоль которой будут располагаться Flex-элементы. Это направление может быть горизонтальным или вертикальным, а также прямым или обратным.
Значения:
row: главная ось идет по горизонтали слева направо (значение по умолчанию)row-reverse: главная ось идет по горизонтали справа налевоcolumn: главная ось идет по вертикали сверху внизcolumn-reverse: главная ось идет по вертикали снизу вверх
Пример использования
1. Элементы располагаются по горизонтали:
.container-row {
display: flex;
flex-direction: row;
border: 2px solid #000;
padding: 10px;
}
.container-row-reverse {
display: flex;
flex-direction: row-reverse;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
<div class="container-row">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
</div>
<div class="container-row-reverse">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
</div>
2. Элементы располагаются по вертикали:
.container-column {
display: flex;
flex-direction: column;
border: 2px solid #000;
padding: 10px;
}
.container-column-reverse {
display: flex;
flex-direction: column-reverse;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
<div class="container-column">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
</div>
<div class="container-column-reverse">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
</div>
Объяснение кода:
.container-row: элементы располагаются по горизонтали слева направо.container-row-reverse: элементы располагаются по горизонтали справа налево.container-column: элементы располагаются по вертикали сверху вниз.container-column-reverse: элементы располагаются по вертикали снизу вверх
6.2 Свойство flex-wrap
Свойство flex-wrap определяет, будут ли Flex-элементы переноситься на новую строку/столбец, если они не помещаются в один ряд. Это особенно полезно для создания адаптивных макетов, где размер контейнера может изменяться в зависимости от устройства или экрана.
Значения
nowrap: элементы не переносятся и располагаются в одну строку/столбец (значение по умолчанию)wrap: элементы переносятся на новую строку/столбец при необходимостиwrap-reverse: элементы переносятся на новую строку/столбец в обратном порядке
Примеры использования
Значение nowrap:
Элементы не переносятся и располагаются в одну строку/столбец (значение по умолчанию).
.container-nowrap {
display: flex;
flex-wrap: nowrap;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container-nowrap">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
<div class="item">Элемент 4</div>
</div>
Значение wrap:
Элементы переносятся на новую строку/столбец при необходимости.
.container-wrap {
display: flex;
flex-wrap: wrap;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container-wrap">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
<div class="item">Элемент 4</div>
</div>
Значение wrap-reverse:
Элементы переносятся на новую строку/столбец в обратном порядке.
.container-wrap-reverse {
display: flex;
flex-wrap: wrap-reverse;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container-wrap-reverse">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
<div class="item">Элемент 4</div>
</div>
Объяснение кода:
.container-nowrap: Flex-элементы располагаются в одну строку, даже если они выходят за границы контейнера.container-wrap: Flex-элементы переносятся на новую строку, если не помещаются в одну строку.container-wrap-reverse: Flex-элементы переносятся на новую строку в обратном порядке
6.3 Использование flex-direction и flex-wrap
Свойства flex-direction и flex-wrap можно комбинировать с помощью сокращенного свойства flex-flow. Это свойство позволяет задавать направление оси и перенос элементов одновременно.
Синтаксис:
.container {
flex-flow: [flex-direction] [flex-wrap];
}
Пример использования:
.container {
display: flex;
flex-flow: row wrap;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
<div class="item">Элемент 4</div>
<div class="item">Элемент 5</div>
</div>
Объяснение кода:
-
.container: Flex-контейнер с комбинированным использованиемflex-direction: row;иflex-wrap: wrap;, что означает, что элементы располагаются по горизонтали и переносятся на новую строку при необходимости
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ