cssの画像表示で、行ごとに2列・3列の異なる表示をしたい

理想

画像を表示例の、アルファベットのように並べたい。つまり、空白領域を含めて３列。
可能であれば、ABなどの順序を任意で変更して、並べ替えできるようにしたい。
画像右側に固定メニューを表示(ここは作成済)、全体をflexで分割している。

表示例：
AB
CDE
FGH

現状コード (htmlはざっくり)

css
1.parent {
2   display: flex;
3   justify-content: left;
4}
5
6.child {
7    flex-wrap: wrap;
8　　display: inline-block;
9}
10.right-side {
11    ....
12}

html
1<div class="parent">
2<div class="child">画像読み込み</div>
3<div class="right-side">固定メニュー</div>
4</div>

不明点

flexで分割した子要素内で、飛ばして表示することは可能なのか？
並び替えをするには、orderプロパティを使えば良さそうだが、空白領域を飛ばせるのか？
画像サイズに変動があっても、自動で縮小されて３列に表示されるか？

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

回答2件

ベストアンサー

flexで分割した子要素内で、飛ばして表示することは可能なのか？
並び替えをするには、orderプロパティを使えば良さそうだが、空白領域を飛ばせるのか？

上記については、A、Bのあとに空の<div>を1つ置けばできます。
CodePenで作ってみたので、ご参照ください。

HTML
1<div class="img-group">
2  <div style="background-image: url(aaa.jpg);"></div>
3  <div style="background-image: url(bbb.jpg);"></div>
4  <div></div>
5  <div style="background-image: url(ccc.jpg);"></div>
6  <div style="background-image: url(ddd.jpg);"></div>
7  <div style="background-image: url(eee.jpg);"></div>
8  <div style="background-image: url(fff.jpg);"></div>
9  <div style="background-image: url(ggg.jpg);"></div>
10  <div style="background-image: url(hhh.jpg);"></div>
11</div>

CSS
1.img-group {
2  display: flex;
3  flex-wrap: wrap;
4  /* align-items: flex-start; */
5}
6.img-group > * {
7  flex-grow: 0;
8  flex-shrink: 0;
9  flex-basis: calc(100% / 3); /* 横幅を指定 */
10  height: 20vw; /* 高さを指定。100vwは画面の横幅100%の意味です。好きなように設定してください */
11  
12  /* 背景画像のための設定 */
13  background-position: center center;
14  background-size: cover;
15}

display: grid;がやりたいことに近そうなので、余裕があれば調べてみることをオススメします。
(IE11では実装がとても面倒にはなるので、対象にしているのであればdisplay: flex;のままでいいかもしれません。)

投稿2020/04/19 04:30

編集2020/04/19 07:16

new1ro

総合スコア4528

dotdotuniv

2020/04/19 10:54

＞空の<div>を1つ置けばできます。 css側でどうにかいじろうとしていたので、完全に盲点でした。。。ありがとうございました。

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

不明点

flexで分割した子要素内で、飛ばして表示することは可能なのか？
並び替えをするには、orderプロパティを使えば良さそうだが、空白領域を飛ばせるのか？

childブロック内に画像(img)を入れるとして、

html
1<div class="parent">
2  <div class="child">
3    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=A">
4    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=B">
5    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=C">
6    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=D">
7    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=E">
8    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=F">
9    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=G">
10    <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=G">
11  </div>
12  <div class="right-side">
13    固定メニュー</div>
14</div>

空白は、before疑似要素を order でA、Bのあとに配置すればいいでしょう。

css
1.parent {
2  max-width: 1000px;
3  display: flex;
4  margin: 0 auto;
5}
6
7.child {
8  width: 70%;
9  display: flex;
10  justify-content: left;
11  flex-wrap: wrap;
12}
13.right-side {
14  width: 30%;
15  background-color: pink;
16}
17
18.child > img, .child::before {
19	display: block;
20  width: 31%;
21  margin: 1%;
22}
23
24.child::before {
25  content: '';
26  order: 0;
27}
28.child img:nth-child(-n+2) {
29  order: -1
30}