フレックスボックスでボックスを重ね合わせて並べる方法はありますか？

Question

なぜitemContainerとpriceContainerが隣り合って見えないのだろうか？

FlexBoxにはどのような種類のファイルを含める必要がありますか？

私はそれがCSS3に組み込まれていると思いました。利用する標準的なアドオンはありますか？

.container { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    flex-direction: row; 
 
} 
 
#orderContainer { 
 
    width: 15%; 
 
    border: 1px solid #f2f2f2; 
 
    height: 100%; 
 
    flex-direction: row; 
 
} 
 
#selectionsContainer { 
 
    width: 85%; 
 
} 
 
#catagoryContainer { 
 
    width: 100%; 
 
    height: calc(20% - 2px); 
 
    border: 1px solid #f2f2f2; 
 
} 
 
#menuContainer { 
 
    width: 100%; 
 
    height: 80%; 
 
    border-top: 0px; 
 
    border: 1px solid #f2f2f2; 
 
} 
 
#itemContainer { 
 
    width: 70%; 
 
    height: 80%; 
 
    border: 1px solid #f2f2f2; 
 
    display: flex; 
 
    order: 1; 
 
} 
 
#priceContainer { 
 
    width: calc(30% - 2px); 
 
    height: 80%; 
 
    border: 1px solid #f2f2f2; 
 
    display: flex; 
 
    order: 2; 
 
}

<div class="container"> 
 
    <div id="orderContainer"> 
 
    <div id="itemContainer"> 
 
     itemContainer 
 
    </div> 
 
    <div id="priceContainer"> 
 
     priceContainer 
 
    </div> 
 
    </div> 
 

 
    <div id="selectionsContainer"> 
 
    <section id="catagoryContainer"> 
 
     catagoryContainer 
 
    </section> 
 
    <section id="menuContainer"> 
 
     menuContainer 
 
    </section> 
 
    </div> 
 
</div>

Answer 1

2つの兄弟要素が隣同士に表示させるために必要な唯一のものは親コンテナにdisplay: flexを宣言しています。

display: flexを.containerに適用しました。これは#itemContainerと#priceContainerの親コンテナではありません。 display: flexを#orderContainerに適用する必要があります。

flex formatting contextは、親子関係に制限されています。子どもを越える子孫は、先祖からの屈曲性の性質を受け入れません。

flexプロパティが子（more details）で動作するためには、親要素に常にdisplay: flex（またはdisplay: inline-flex）を適用する必要があります。

---

フレックスコンテナを設定すると、いくつかのデフォルト設定が有効になります。ここでは、2つがあります：

• flex-direction: row - 子要素（フレックス項目）水平
• flex-wrap: nowrapを整列させる - フレックス項目は、単一のライン

---

フレキシボックスに滞在することを余儀なくされていることはCSS3の技術であり、 。ライブラリーやその他のファイルを追加する必要はありません。他のCSSと同じように動作します。 browser supportにご注意ください。