Выравнивание элементов из разных дивов

281

10 марта 2018, 17:14

Нужно выровнять блоки из разных дивов относительно друг друга в номерном порядке. Я ищу какое-то свойство, вроде order-group(<-- придуманное свойство), или что-то такое, чтобы можно было определить, к какой именно группе выравнивания элемент относится, и выровнять этот элемент относительно других элементов группы с помощью свойства order. Существует ли такое свойство, и если да, как оно называется?

Answer 1

Флексбокс позволяет использовать order, а ещё в css есть (с сомнительной поддержкой) display: contents. Совмещаем и, теоретически, должно работать:

body { 
  display: flex; 
} 
 
section { 
  display: contents; 
}

<section> 
  <div style="order:1">A1</div> 
  <div style="order:2">A2</div> 
  <div style="order:3">A3</div> 
</section> 
<section> 
  <div style="order:1">B1</div> 
  <div style="order:2">B2</div> 
  <div style="order:3">B3</div> 
</section> 
<section> 
  <div style="order:1">C1</div> 
  <div style="order:2">C2</div> 
  <div style="order:3">C3</div> 
</section>

Собственно, в FF58 действительно работает: