20/31 - 100% минимальный код

.palette{
display: flex;
flex-direction:column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-items: flex-end;
}
.color-1 {
align-self: flex-start;
order: 3;
}
.color-3 {
order: 2;
}
.color-5{
order: 1;
}

1 лайк

а почему именно такие значения order? почему не, например, 7000, 8000, 999000? если уж минимальный код, то можно было обойтись без двухзначных чисел.

Согласен =) Поправил =)

.palette{
display:flex;
flex-direction:column;
flex-wrap:wrap-reverse;
align-content:center;
justify-content:center;}
.color-1{
order:7;
}
.color-2{
order:6;
}
.color-4{
order:5;
}
.color-6{
order:4;
}

1 лайк

Блин я уже весь мозг себе сломал с этими ордерами. Откуда отсчет идет? И каждый раз после присвоения нового ордера отсчет начинается заново? Объясните пожалуйста, как в данном случае это рассчитывалось.

1 лайк

Согласен. Каждому диву присваивал номера order, но так и не понял как они меняются

.palette{
    display:flex;
    flex-direction:column-reverse;
    justify-content:center;
    align-content:center;
    flex-wrap:wrap-reverse;
}

.color-1{
    order:3;
}

.color-3{
    order:2;
}

.color-5{
    order:1;
}

Можно сделать column-reverse, чтобы не четыре ордера писать, а три.
Также, при расчете ордеров, можно изначально задавать для последнего элемента значение, равное числу всех таких элементов в списке. Потом, для всех остальных в упорядочивании писать это значение минус порядок от конца. И вообще в конце, при желании, сделать 0-1-2-3-… или с минусовых значений начиная, а не от нуля.

P.S.Уважаемые знатоки, меня тоже интересует вопрос, влияет ли минусовые/плюсовые значения order на производительность и на качество кода (естественно, если они заданы в разумных пределах, по принципу 0-1-2-3, а не 343-3456-56565 :slight_smile:)?

2 лайка

В плане использования свойства order у нас есть три варианта:

  1. Не использовать его вовсе;
  2. Использовать с положительным значением;
  3. Использовать с отрицательным значением.

Если использовать все варианты, то станет понятно:

  • Не используем свойство order или оно равно “0”, порядок элементов фиксирован и зависит от их порядка расположения в разметке:

`

` ---------- * Используем **_положительное значение:_**

<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
<div class="2"></div> style=“order: 1”
<div class="1"></div> style="order: 2"

Что мы видим: отчет порядка отображения “положительных” флекс-элементов начинается после последнего элемента без свойства order или значение, которого равно “0”, что равнозначно его отсутствию. Если таких элементов нету, то первым идет элемент с наименьшим положительным значением и чем больше значение order, тем ниже его элемент будет находиться в порядке отображения (блок class=“2” в разметке был ниже блока class=“1”)

  • Используем отрицательное значение:
    <div class="5"></div> style="order: -2"
    <div class="4"></div> style=“order: -1”
    <div class="3"></div>
    <div class="2"></div> style=“order: 1”
    <div class="1"></div> style="order: 2"

Что мы видим: отчет порядка отображения “отрицательных” флекс-элементов начинается перед первым элементом без свойства order или значение, которого равно “0”, что равнозначно его отсутствию. Если таких элементов нету, то первым идет элемент с наибольшим значением (-1 > -2) и чем меньше значение order, тем выше его элемент будет находиться в порядке отображения (блок class=“5” в разметке был ниже блока class=“4”).

1 лайк

Воспользуйтесь кнопкой </> в редакторе сообщений для корректного отображения кусочков кода.

Тоже не мог понять как ордера работают. Тоже думал, что они изначально заданы по порядку следования флекс-элементов в html:

вот так я неправильно думал

элемент 1 - order:0
элемент 2 - order:1
элемент 3 - order:2
элемент 4 - order:3

Потом понял (спасибо alexfr26 !!!), что у всех элементов изначально order: 0!!!

Представим себе флекс-контейнер с 6 элементами, у них по-дефолту ордер=0:

свернул для удобства

элемент 1 - order:0
элемент 2 - order:0
элемент 3 - order:0
элемент 4 - order:0
элемент 5 - order:0
элемент 6 - order:0

Если я присвою 3-му элементу order:1, то он станет последим и порядок будет таким:

элемент 1 - order:0
элемент 2 - order:0
элемент 4 - order:0
элемент 5 - order:0
элемент 6 - order:0
элемент 3 - order:1

Если я присвою 1-му элементу order:2, то он станет последим и порядок отображения будет таким:

элемент 2 - order:0
элемент 4 - order:0
элемент 5 - order:0
элемент 6 - order:0
элемент 3 - order:1
элемент 1 - order:2

Если я присвою 5-му элементу order:-1, то он станет первым и порядок отображения будет таким:

элемент 5 - order:-1
элемент 2 - order:0
элемент 4 - order:0
элемент 6 - order:0
элемент 3 - order:1
элемент 1 - order:2

А, вот, если я присвою и 4-му элементу order: 1, то мы получим два элемента с одинаковым ордером и их порядок отображения будет зависеть от html-файла и общая картина станет такой:

элемент 5 - order:-1
элемент 2 - order:0
элемент 6 - order:0
элемент 3 - order:1
элемент 4 - order:1
элемент 1 - order:2

Сейчас я понимаю правила использования order так:

  1. изначально у всех элементов ордер=0 и отображение элементов идет по порядку написанному в html-файле
  2. если какому-то элементу присваивается ордер отличный от нуля, то порядок изменяется - элементы отображаются по ордерам от меньшего числа к большему. При этом для элементов с одинаковыми значениями order смотрим порядок следования элементов в html-файле.
6 лайков