私が所有して運営しているサイトのこのページデザインをご覧ください。
http://www.jungledragon.com/image/9472/barn_owl_close-up.html
ご覧のとおり、これは従来の2列のレイアウトに関係しています。物事の順序は重要です。たとえば、写真のすぐ横に、これが関係する種を確認できます。
現在、このサイトのレスポンシブデザインをコーディングしており、課題に直面しています。狭いスマートフォンのビューポートでそのページを想像してみてください。古典的な戦略は、右の列を左の列の下に単純に「スタック」し、ユーザーが垂直方向にスクロールできるようにすることです。ただし、これは要素の順序に関しては理想からはほど遠いものです。「種」ブロックは写真のずっと下にあり、ユーザーは写真と種の関係を確認する前に、まずコメントなどをスクロールする必要があります。
私はそれを解決しようとしていますが、CSSのフレックスボックスを可能な解決策として説明しているこの記事は非常に有望に聞こえました：
http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
ここでの考え方は、CSSのみを使用して、要素の視覚的な順序を、まさに私が必要としているものに変更できるということです。残念ながら、それ以来、この記事では古い仕様が使用されており、新しい仕様はどのブラウザでもほとんどサポートされていないことを知りました。
http://css-tricks.com/old-flexbox-and-new-flexbox/
この種は私にとってそれを台無しにします。それでも、概念レベルで質問したいと思います。
フレックスボックスに関して私が見たすべてのデモには、次のような単純なマークアップがあります。
<div id="somecontainer">
<div id="child1"></div>
<div id="child2"></div>
</div>
次に、コンテナは垂直方向のフレックスボックスであると宣言されます。そして最後に、各子要素に順序が割り当てられます。これにより、たとえば、単一のCSSステートメントを使用してchild2をchild1の上に移動できます。
ここに質問があります。追加の階層が機能しているという意味で、実際のマークアップがより複雑な場合はどうなりますか？例：
<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>
ご覧のとおり、このマークアップには追加の階層があり、並べ替えられる実際のコンテンツブロックは、最上位のコンテナの直接の子要素ではありません。彼らは子供ですが、直接の子供ではありません。
フレックスボックスと子要素の並べ替えは、このようなシナリオで機能しますか？たとえば、「content5」を「content1」と「content2」の間に移動できますか？
ブラウザのサポートが不十分であるにもかかわらず、私はそれがサポートされるかどうかを概念的に理解しようとしています。私が尋ねる理由は、追加の列階層はマークアップで非常に一般的であり、フレックスボックスの並べ替えが直接の子でのみ機能する場合は完全にダメだからです。