Направление внутри флекс-контейнера

По умолчанию флекс-элементы внутри контейнера отображаются в ряд слева направо в том порядке, в каком они прописаны в коде HTML -документа . Они следуют направлению потока.

Значение по умолчанию flex-direction: row;

Флексбокс-вёрстка позволяет преобразовать ряд в колонку и обратить порядок следования, направив его против потока. Для этого контейнеру придают свойство flex-direction (англ. direction, «направление»).

Для того чтобы свойство флекс бокса flex-direction работал необходимо чтобы у этого блока было свойство display: flex;

Как назначить направления отображение элементов

• flex-direction: row ; — обычный ряд (англ. row, «ряд»), элементы следуют в потоке, слева направо. Это значение по умолчанию, его можно и не прописывать.

• flex-direction: row-reverse ; — ряд в обратном порядке (англ. reverse, «обратный ход»).

• flex-direction: column ; — колонка (англ. column, «столбец») в обычном порядке. Очень пригождается при адаптации под мобильные устройства.

• flex-direction: column-reverse ; — колонка в обратном порядке.

1

2

3

flex-direction:



  - flex контейнер 
 

  - flex элемент 


  - Содержимое flex элемента (контент) 
 

 родительский контейер  
.parent {
    flex-direction:row;
    border: rgba(211, 221, 66, 0.63) 20px solid;
    margin: 0px 0px 20px 0px;
}


 дочерний контейнер  
.item {
    border: rgba(97, 47, 177, 0.63) 20px solid;
}


 контент дочернего блока  
.item__content {
    background-color: rgba(12, 134, 88, 0.63);
    padding: 50px;
    font-size: 30px;
    color: rgb(255, 255, 255);
}