.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;
}
а почему именно такие значения 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;
}
Блин я уже весь мозг себе сломал с этими ордерами. Откуда отсчет идет? И каждый раз после присвоения нового ордера отсчет начинается заново? Объясните пожалуйста, как в данном случае это рассчитывалось.
Согласен. Каждому диву присваивал номера 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 )?
В плане использования свойства order у нас есть три варианта:
- Не использовать его вовсе;
- Использовать с положительным значением;
- Использовать с отрицательным значением.
Если использовать все варианты, то станет понятно:
- Не используем свойство 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”).
Воспользуйтесь кнопкой </>
в редакторе сообщений для корректного отображения кусочков кода.
Тоже не мог понять как ордера работают. Тоже думал, что они изначально заданы по порядку следования флекс-элементов в 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 так:
- изначально у всех элементов ордер=0 и отображение элементов идет по порядку написанному в html-файле
- если какому-то элементу присваивается ордер отличный от нуля, то порядок изменяется - элементы отображаются по ордерам от меньшего числа к большему. При этом для элементов с одинаковыми значениями order смотрим порядок следования элементов в html-файле.