質問: flexを使用してレイアウトを組みたいのですが、下記の組み方だとbox内のコンテンツによってカラム落ちしてしまいます。 box_300 ,box_auto をdivで囲ってnowrapを指定すればカラム落ちしないことは分かるのですが、下記の組み方でカラム落ちしない書き方はありますでしょうか? なにとぞよろしくお願いいたします。 ``` コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ ``` ``` .list_flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } [class*="box_"] { border: 1px solid #000; min-height: 100px; } .box_full { -webkit-flex: 0 0 100%; flex: 0 0 100%; } .box_300 { -webkit-flex: 0 0 300px; flex: 0 0 300px; } .box_auto { -webkit-flex: 1 1 auto; flex: 1 1 auto; } .list_el { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .cnt { border: 2px solid #ccc; width: 100%; height: 500px; } ```
回答: 「`li.box_auto`内のコンテンツ量が多いとき、`li.box_auto`が折り返してしまうこと」が問題なのであれば、以下のようにすることで、質問者さんの問題は解決すると思います。 ``` タイトル コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ ``` しかし、上記のコードは、**`flex-wrap`プロパティに`nowrap`を設定した場合と、全く同じように動作する、というわけではありません**。そのため、`li.box_auto`内にコンテンツを収めておけない横幅になった場合、**`li.box_auto`は折り返されます**。もしも、`flex-wrap: nowrap`を指定したときと全く同じ動作にしたいならば、HTMLの構造を見直さなければならないと思います。