質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6168閲覧

flex を使用したレイアウトのカラム落ちの制御

hiroakitajima

総合スコア27

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/10/13 14:00

flexを使用してレイアウトを組みたいのですが、下記の組み方だとbox内のコンテンツによってカラム落ちしてしまいます。
box_300 ,box_auto をdivで囲ってnowrapを指定すればカラム落ちしないことは分かるのですが、下記の組み方でカラム落ちしない書き方はありますでしょうか?
なにとぞよろしくお願いいたします。

html

1 <ul class="list_flex"> 2 <li class="box_full"></li> 3 <li class="box_300"></li> 4 <li class="box_auto"> 5 <ul class="list_el"> 6 <li><div>コンテンツ</div></li> 7 <li><div>コンテンツ</div></li> 8 <li><div>コンテンツ</div></li> 9 <li><div>コンテンツ</div></li> 10 <li><div>コンテンツ</div></li> 11 </ul> 12 </li> 13 </ul>

css

1 2 .list_flex { 3 display: -webkit-flex; display: flex; 4 -webkit-flex-wrap: wrap; flex-wrap: wrap; 5 } 6 [class*="box_"] { 7 border: 1px solid #000; 8 min-height: 100px; 9 } 10 .box_full { 11 -webkit-flex: 0 0 100%; flex: 0 0 100%; 12 } 13 .box_300 { 14 -webkit-flex: 0 0 300px; flex: 0 0 300px; 15 } 16 .box_auto { 17 -webkit-flex: 1 1 auto; flex: 1 1 auto; 18 } 19 20 .list_el { 21 display: -webkit-flex; display: flex; 22 -webkit-flex-wrap: wrap; flex-wrap: wrap; 23 } 24 .cnt { 25 26 border: 2px solid #ccc; 27 width: 100%; 28 height: 500px; 29 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/10/14 02:18

>box内のコンテンツによってカラム落ち・・・ → どこのbox内にコンテンツが入る予定ですか?
guest

回答1

0

ベストアンサー

li.box_auto内のコンテンツ量が多いとき、li.box_autoが折り返してしまうこと」が問題なのであれば、以下のようにすることで、質問者さんの問題は解決すると思います。

HTML

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 box-sizing: border-box; 11 } 12 13 ul { 14 list-style: none; 15 } 16 17 .list_flex { 18 display: flex; 19 flex-wrap: wrap; 20 } 21 22 [class*="box_"] { 23 border: 1px solid #000; 24 min-height: 100px; 25 } 26 27 .box_full { 28 flex: 0 0 100%; 29 } 30 31 .box_300 { 32 flex: 0 0 300px; 33 } 34 35 .box_auto { 36 flex: 1 1 0; /* 変更 */ 37 min-width: 0; /* 追記 */ 38 } 39 40 .list_el { 41 display: flex; 42 flex-wrap: wrap; 43 } 44 </style> 45</head> 46<body> 47<ul class="list_flex"> 48 <li class="box_full">&nbsp;</li> 49 <li class="box_300">&nbsp;</li> 50 <li class="box_auto"> 51 <ul class="list_el"> 52 <li> 53 <div>コンテンツ</div> 54 </li> 55 <li> 56 <div>コンテンツ</div> 57 </li> 58 <li> 59 <div>コンテンツ</div> 60 </li> 61 <li> 62 <div>コンテンツ</div> 63 </li> 64 <li> 65 <div>コンテンツ</div> 66 </li> 67 <li> 68 <div>コンテンツ</div> 69 </li> 70 <li> 71 <div>コンテンツ</div> 72 </li> 73 <li> 74 <div>コンテンツ</div> 75 </li> 76 <li> 77 <div>コンテンツ</div> 78 </li> 79 <li> 80 <div>コンテンツ</div> 81 </li> 82 <li> 83 <div>コンテンツ</div> 84 </li> 85 <li> 86 <div>コンテンツ</div> 87 </li> 88 <li> 89 <div>コンテンツ</div> 90 </li> 91 <li> 92 <div>コンテンツ</div> 93 </li> 94 </ul> 95 <hr> 96 <ul class="list_el"> 97 <li> 98 <div>コンテンツ</div> 99 </li> 100 <li> 101 <div>コンテンツ</div> 102 </li> 103 <li> 104 <div>コンテンツ</div> 105 </li> 106 <li> 107 <div>コンテンツ</div> 108 </li> 109 <li> 110 <div>コンテンツ</div> 111 </li> 112 <li> 113 <div>コンテンツ</div> 114 </li> 115 <li> 116 <div>コンテンツ</div> 117 </li> 118 </ul> 119 <hr> 120 <ul class="list_el"> 121 <li> 122 <div>コンテンツ</div> 123 </li> 124 <li> 125 <div>コンテンツ</div> 126 </li> 127 <li> 128 <div>コンテンツ</div> 129 </li> 130 <li> 131 <div>コンテンツ</div> 132 </li> 133 <li> 134 <div>コンテンツ</div> 135 </li> 136 <li> 137 <div>コンテンツ</div> 138 </li> 139 <li> 140 <div>コンテンツ</div> 141 </li> 142 </ul> 143 </li> 144</ul> 145</body> 146</html>

しかし、上記のコードは、flex-wrapプロパティにnowrapを設定した場合と、全く同じように動作する、というわけではありません。そのため、li.box_auto内にコンテンツを収めておけない横幅になった場合、li.box_autoは折り返されます。もしも、flex-wrap: nowrapを指定したときと全く同じ動作にしたいならば、HTMLの構造を見直さなければならないと思います。

投稿2018/10/13 19:46

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiroakitajima

2018/10/14 02:44

ご回答有り難うございます。 上記コードでカラム落ちしなくなった点、nowrapと動作が違う点、共に把握いたしました。 flex-grow, flex-shrink, flex-basisについてもっと理解を深めたいと思います。 大変助かりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問