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

現状、
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}

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

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%; } こんな感じです。

Yorrie

2020/05/09 07:54

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

niccha

2020/05/09 08:24

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

hatena19

2020/05/09 09:14

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

行動規範の内容に同意します

回答1件

ベストアンサー

上記コードの場合、２列になりますが、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}