Как можно манипулировать блоками при помощи 1 класса?

Question

[Дмитрий Гончаров]

Приветствую. Подскажите, пожалуйста, как правильно будет сделать такую манипуляцию блоками, накидывая только 1 класс на контейнер, что-то вроде order?

Answer 1

[dicem]

Если применение только одного класса вам крайне необходимо, используйте :nth-child(), т.е.:

order:nth-child( 1 ){...}
order:nth-child( 2 ){...}
order:nth-child( 3 ){...}
order:nth-child( 4 ){...}
order:nth-child( 5 ){...}
order:nth-child( 6 ){...}
order:nth-child( 7 ){...}

Подробнее, об nth-child() можно узнать тут: Псевдокласс :nth-child

Answer 2

[Svetley]

На родитель если, то в голову ничего по-быстрому не приходит. А вот на вложенный блок можно можно (margin).. Только родитель должен быть флексом.
(Кстати, значение margin:auto получило премию журнала Форбс в номинации «Самое влиятельное значение CSS-свойства внутри флекс-контейнера»)
UPD: А вот и мысль про родителя пришла. Те же флексы на контейнер с justify-content и align-items.