Create: Update:
Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.
Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
Основная ось — горизонтальная, элементы располагаются справа налево.
Основная ось — вертикальная, элементы располагаются сверху вниз.
Основная ось — вертикальная, элементы располагаются снизу вверх.
Горизонтальное направление (слева направо):
.container {
display: flex;
flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}Горизонтальное направление (справа налево):
.container {
display: flex;
flex-direction: row-reverse;
}Вертикальное направление (сверху вниз):
.container {
display: flex;
flex-direction: column;
}Вертикальное направление (снизу вверх):
.container {
display: flex;
flex-direction: column-reverse;
}Пример HTML и CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction</title>
<style>
.container {
display: flex;
flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
border: 1px solid #000;
height: 200px;
}
.item {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
