HTML
1<div class="brand">
2
3<div><img src="image/brand01.jpg"><img src="image/brand_logo01.png"></div>
4
5<div><img src="image/brand02.jpg"><img src="image/brand_logo02.png"></div>
6
7<div><img src="image/brand03.jpg"><img src="image/brand_logo03.png"></div>
8
9<div><img src="image/brand04.jpg"><img src="image/brand_logo04.png"></div>
10
11<div><img src="image/brand05.jpg"><img src="image/brand_logo05.png"></div>
12
13<div><img src="image/brand06.jpg"><img src="image/brand_logo06.png"></div>
14
15<div><img src="image/brand07.jpg"><img src="image/brand_logo07.png"></div>
16
17<div><img src="image/brand08.jpg"><img src="image/brand_logo08.png"></div>
18
19<div><img src="image/brand09.jpg"><img src="image/brand_logo09.png"></div>
20
21<div><img src="image/brand10.jpg"><img src="image/brand_logo10.png"></div>
22
23<div><img src="image/brand11.jpg"><img src="image/brand_logo11.png"></div>
24
25<div><img src="image/brand12.jpg"><img src="image/brand_logo12.png"></div>
26
27<div><img src="image/brand13.jpg"><img src="image/brand_logo13.png"></div>
28
29<div><img src="image/brand14.jpg"><img src="image/brand_logo14.png"></div>
30
31<div class="brand"><img src="image/brand15.jpg"><img src="image/brand_logo15.png"></div>
32
33
34</div>

brand{
background-color:red;
display:flex;

リンク内容のように表示したい。

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

回答2件

ベストアンサー

下記のような感じでしょうか。

css
1.brand {
2  width: 1000px;
3  margin: 0 auto;
4  display: flex;
5  flex-wrap: wrap; 
6}
7
8.brand div{
9  width: 480px;
10  display: flex;
11  flex-direction: column;
12  align-items:center;
13  margin:10px;
14}
15.brand div img {
16  flex: 0 0 auto;
17  margin: 2px;
18}

CodePenサンプル

投稿2020/07/17 05:43

hatena19

総合スコア34075

真ん中と下に空間開けたい

こうでしょうか？

css
1.brand div{
2  width: 100%;
3  flex: 0 0 auto;
4  display: flex;
5  justify-content: space-between;
6  margin-bottom:10vh;
7}

コメントを受けて追記

css
1        .brand{
2flex-flow: wrap;
3        }
4        .brand div{
5  width: 47.5%;
6  flex: 0 0 auto;
7  margin-bottom:5%;
8}
9.brand div img{
10  width: 100%;
11}