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

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

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

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

CSS

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

Q&A

解決済

1回答

12411閲覧

display flex 縦並び2列 折返しの件

niccha

総合スコア22

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

CSS

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

0グッド

0クリップ

投稿2020/05/09 05:53

編集2020/05/09 09:27

現状、
flex-flow: column wrap; にて、縦方向へflex&折返しさせているのですが、
任意のボックスから2列目へということは出来ますでしょうか?
今は、親要素へ高さ指定し、調整して、2列目の最初のボックスを調整しているのですが。
高さ指定での折返しだと、高さが変動してしまう仕様なので、都度都度高さ指定見直ししないといけないもので。

ご教示お願いいたします。

コードは、

HTML

1<div class="container"> 2<div class="box"> 3内容 4</div> 5<div class="box"> 6内容 7</div> 8<div class="box"> 9内容 10</div> 11<div class="box"> 12内容 13</div> 14</div>

CSS

1.container { 2height: 900px; 3flex-flow: column wrap; 4} 5.box { 6height: 400px; 7width: 50%; 8}

上記コードの場合、2列になりますが、container、boxの両方のheightをautoにした場合、2つめのboxで列換えをさせる方法がありますでしょうか??

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

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

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

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

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

okina

2020/05/09 06:51

現状のコードを提示してください
niccha

2020/05/09 06:59 編集

HTML <div class="container"> <div class="box"> 内容 </div> <div class="box"> 内容 </div> <div class="box"> 内容 </div> <div class="box"> 内容 </div> </div> CSS .container { height: 900px; flex-flow: column wrap; } .box { height: 400px; width: 50%; } こんな感じです。
TatamiSteak

2020/05/09 07:54

コードは質問の本文を編集して入れないとみんな気付きませんよ…
niccha

2020/05/09 08:24

そうなのですね、ありがとうございます!
hatena19

2020/05/09 09:14

「任意のボックス」とは具体的にどのように指定するのでしょうか。 提示のHTMLだと2×2のレイアウトにしたいということでしょうか。
guest

回答1

0

ベストアンサー

上記コードの場合、2列になりますが、container、boxの両方のheightをautoにした場合、2つめのboxで列換えをさせる方法がありますでしょうか??

2つめのbox以降が下記のように2列目にくるというこでしょうか。

txt

1box1 box2 2 box3 3 box4

HTMLの変更が可能なら、box1 と box2 以降を別のdivで囲めば可能です。
HTMLの変更が不可なら、CSSだけではたぶん無理だと思います。JSが必要になるかな。

追記

もう少し考えてみたら、CSS Grid を使えばできそうです。
下記の感じでどうでしょうか。

css

1.container { 2 display: grid; 3 grid-template-columns: 50% 50%; 4 grid-template-rows: auto auto auto auto; 5} 6.box { 7 height: auto; 8} 9.box { 10 grid-column: 2; 11} 12.box:first-child { 13 grid-column: 1; 14 grid-row: 1/ 5; 15}

Codepenサンプル

投稿2020/05/09 10:19

編集2020/05/09 14:30
hatena19

総合スコア33808

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

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

niccha

2020/05/09 11:25

htmlの変更は可能で別のdivで囲めば当然出来るかとはわかっていたのですが、 CSSで出来ないものかな?と思っておりまして。 やはり無理なのですね、どうもありがとうございました。
hatena19

2020/05/09 14:31

CSS Grid でそれらしくできました。回答に追記しましたので参考にしてください。
niccha

2020/05/09 22:04

なるほど、その手がありましたか。 後ほどやってみます!ありがとうございます!
niccha

2020/05/10 04:58

うまくいきました、ありがとうございます。 ちなみに、上記方法で、 box1 box3 box2 box4 とするには、どこを修正すればいいでしょうか?? grid、使用したことがないもので。
hatena19

2020/05/10 07:18

Gridは行列のテーブルレイアウトになるので、それだとbox1とbox3の高さが同じになるようなレイアウトになってしまいますね。 内容で高さが変わるようにするには、HTMLで1列目と2列目を分けることになると思います。
niccha

2020/05/10 12:37

1と3の高さが同じようになるのは問題ないんです。 gridレイアウト、いろいろ調べてみまして、 box1 box3 box2 box4 でうまくレイアウト出来ました。 この度は、どうもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問