flexboxでのマルチカラムレイアウトの実現方法

はじめまして。

下記のようなレイアウトをflexboxを使って実現することはできるのでしょうか。
一つの親要素の中で実現できるのであれば、その方法を知りたいと思っています。

　□　 □ 　 □
□　 □　 □
□ □ □ □ □

皆様の知恵をご教示ください。よろしくお願いいたします。

yambejp

2021/09/16 02:56

上１１個の山の字の部分と下6個はあきらかに違うと思いますが構造をわけてはいけないのでしょうか？

dera

2021/09/16 03:00 編集

ご回答ありがとうございます。構造を分けるというのは、 □ □ □ □ □ □　の部分と □ □ □ □ □　の部分で切り離して考える、ということでしょうか？（flexboxを２つ作るイメージ？）

yambejp

2021/09/16 03:05

□　 □ 　 □ □　 □　 □ □ □ □ □ □ は、均等割り付けてきな処理ですよね？その下の □□□ □□□ は左寄せだと、同じ流れで処理は無理があるかと思います

dera

2021/09/16 03:12 編集

申し訳ございません。質問の仕方が悪かったです。シンプルに、一つのflexbox（親要素の中）で子要素を下記のように配置できるのかが知りたくて・・・・。 □ 　 □　 □ □ 　 □　 □ □ □ □ □ □ 私の調べ方が悪かったのか、こういったことをしている人が見つからなかったので、質問させていただきました。

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

回答2件

ベストアンサー

山の字のようなレイアウトならこんな感じで

css
1<style>
2#wrap{
3display:flex;
4flex-wrap:wrap;
5justify-content:space-between
6}
7#wrap > div{
8width:100px;
9height:100px;
10background-Color:red;
11margin-top:50px;
12}
13#wrap > div:nth-child(2n){
14background-Color:blue;
15}
16#wrap > div:nth-child(2),
17#wrap > div:nth-child(5){
18margin-left:calc(50% - 150px);
19margin-right:calc(50% - 150px);
20}
21#wrap > div:nth-child(1),
22#wrap > div:nth-child(2),
23#wrap > div:nth-child(3){
24margin-top:0px;
25}
26</style>
27<div id="wrap">
28<div></div>
29<div></div>
30<div></div>
31<div></div>
32<div></div>
33<div></div>
34<div></div>
35<div></div>
36<div></div>
37<div></div>
38<div></div>
39</div>

投稿2021/09/16 03:14

yambejp

総合スコア116724

dera

2021/09/16 03:47

ありがとうございます！理想のレイアウトを実現できました。

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

たとえば、ダミー要素を入れるとか。

html
1<div class="hoge-box">
2            <div class="item">
3                子要素
4            </div>
5
6<div class="dummy"></div>
7
8            <div class="item">
9                子要素
10            </div>
11
12<div class="dummy"></div>
13
14            <div class="item">
15                子要素
16            </div>
17
18            <div class="item">
19                子要素
20            </div>
21
22<div class="dummy"></div>
23
24            <div class="item">
25                子要素
26            </div>
27
28<div class="dummy"></div>
29
30            <div class="item">
31                子要素
32            </div>
33
34            <div class="item">
35                子要素
36            </div>
37
38            <div class="item">
39                子要素
40            </div>
41
42            <div class="item">
43                子要素
44            </div>
45
46            <div class="item">
47                子要素
48            </div>
49
50            <div class="item">
51                子要素
52            </div>
53
54        </div>

css
1    .hoge-box {
2            display: flex;
3flex-wrap: wrap;
4        }
5        
6    .item,.dummy{
7      width: 20%;
8      height: 50px;
9    }
10    .item{
11      background: gray;
12    }