Свойство flex-direction
Определяет способ размещения элементов в контейнере flexbox, задает основную ось и задает направление элементов
flex-direction: column;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex-direction: row;
Направление элементов flexbox совпадает с направлением текста вдоль главной оси, они идут вряд друг за другом слева направо, если направление текста ltr, и справа налево, если направление текста rtl
<style>
.example-1 {
display: flex;
flex-direction: row;
outline: 2px dashed #ccc;
}
.example-1-item {
flex-basis: 25%;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-1">
<div class="example-1-item">1</div>
<div class="example-1-item">2</div>
<div class="example-1-item">3</div>
<div class="example-1-item">4</div>
</div>flex-direction: row-reverse;
Направление элементов flexbox противоположено направлению текста вдоль главной оси, они идут вряд друг за другом справа налево, если направление текста ltr, и слева направо, если направление текста rtl
<style>
.example-2 {
display: flex;
flex-direction: row-reverse;
outline: 2px dashed #ccc;
}
.example-2-item {
flex-basis: 25%;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-2">
<div class="example-2-item">1</div>
<div class="example-2-item">2</div>
<div class="example-2-item">3</div>
<div class="example-2-item">4</div>
</div>flex-direction: column;
Элементы идут друг под другом сверху вниз и по умолчанию занимают всю ширину flexbox контейнера
<style>
.example-3 {
display: flex;
flex-direction: column;
outline: 2px dashed #ccc;
}
.example-3-item {
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-3">
<div class="example-3-item">1</div>
<div class="example-3-item">2</div>
<div class="example-3-item">3</div>
<div class="example-3-item">4</div>
</div>flex-direction: column-reverse;
Элементы идут друг под другом снизу вверх и по умолчанию занимают всю ширину flexbox контейнера
<style>
.example-4 {
display: flex;
flex-direction: column-reverse;
outline: 2px dashed #ccc;
}
.example-4-item {
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-4">
<div class="example-4-item">1</div>
<div class="example-4-item">2</div>
<div class="example-4-item">3</div>
<div class="example-4-item">4</div>
</div>Читайте также
Обсуждение (1)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии