Методология HTML

флекс-элементы. Порядок размещения

Во флексбокс-вёрстке такое можно проделывать, не трогая ни HTML-код, ни CSS-правило для контейнера. В правила тех флекс-элементов, чей порядок следования нужно переопределить, вводится свойство order.

Элемент, которому задано CSS-свойство order: 1; будет показан раньше элемента со свойством order: 2; (здесь могут быть любые целые числа, лишь бы одно из них было меньше другого).

Элемент с отрицательным значением порядка ( order: -1; ) будет первым в контейнере, если у других элементов значения положительны или даже не заданы («капитан команды»). Весьма удобно для главной новости на сайте или меню.

И наоборот, если порядок с положительным значением задан одному-единственному элементу, тот закрепляется на последнем месте («вратарь»).

Порядок размещения элементов

Элементу 1 мы задаем разные order и в зависимости от значения он занимает разное место среди других элементов

order: 2;

order: 4;

order:


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

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


 дочерний контейнер  
.item {
    order:-1;
    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);
}