Свойство 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>
1
2
3
4
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>
1
2
3
4
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>
1
2
3
4
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
2
3
4

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии