Spójrz na projekt strony witryny, którą posiadam i uruchom:

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

Jak widać, dotyczy to klasycznego układu dwóch kolumn. Kolejność rzeczy jest ważna. Na przykład możesz zobaczyć bezpośrednio obok zdjęcia, co to dotyczy.

Koduję teraz responsywny projekt dla tej strony i stoję przed wyzwaniem. Wyobraź sobie tę stronę w wąskiej rzutni smartfona. Klasyczną strategią byłoby po prostu „ułożenie” prawej kolumny pod lewym i pozwolić użytkownikom przewijać się pionowo. Jest to jednak dalekie od ideału pod względem kolejności elementów. Blok „specie” znajdowałby się poniżej zdjęcia, użytkownicy musieliby najpierw przewijać rzeczy, takie jak komentarze, zanim zobaczą relację między zdjęciem a gatunkiem.

Próbuję to rozwiązać, a ten artykuł, który wyjaśnia flexbox CSS jako możliwe rozwiązanie, brzmiał bardzo obiecująco:

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

Chodzi o to, że tylko przy użyciu CSS można zmienić wizualną kolejność elementów, dokładnie to, czego potrzebuję. Niestety od tego czasu dowiedziałem się, że artykuł używa przestarzałej specyfikacji i że nowa specyfikacja jest prawie nie obsługiwana przez żadną przeglądarkę:

http://css-tricks.com/old-flexbox-and-new-flexbox/

To dla mnie rujnuje. Niemniej jednak nadal chciałbym zadać moje pytanie na poziomie koncepcyjnym:

Wszystkie pokazy demo, które widziałem na temat Flexboxa, mają tak proste oznaczenia:

<div id="somecontainer">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Następnie kontener jest zadeklarowany jako flexbox, kierunek pionowy. I wreszcie, do każdego elementu podrzędnego przypisywane jest zamówienie. Pozwala to na przykład na przeniesienie child2 powyżej child1, używając pojedynczej instrukcji CSS.

Oto pytanie. Co jeśli rzeczywisty narzut jest bardziej złożony w tym sensie, że istnieją dodatkowe hierarchie? Przykład:

<div id="somecontainer">

  <div id="colmain">

    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>

  </div>

  <div id="colside">

    <div id="content4"></div>
    <div id="content5"></div>
    <div id="content6"></div>

  </div>

</div>

Jak widać, ten znacznik ma dodatkowe hierarchie, rzeczywiste bloki treści, które mają zostać zmienione, nie są bezpośrednimi elementami podrzędnymi kontenera najwyższego poziomu. Są dziećmi, ale nie bezpośrednimi dziećmi.

Czy flexbox i zmiana kolejności elementów potomnych mogą działać w takim scenariuszu? Czy na przykład „treść5” może zostać przeniesiona między „content1” a „content2”?

Niezależnie od słabej obsługi przeglądarki staram się koncepcyjnie zrozumieć, czy będzie to obsługiwane. Powód, dla którego pytam, jest taki, że dodatkowe hierarchie kolumn są bardzo powszechne w znacznikach i całkowicie by się wyssały, gdyby zmiana kolejności Flexbox działała tylko na bezpośrednich potomkach.