不明点
- 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}
Codepenサンプル
- 画像サイズに変動があっても、自動で縮小されて3列に表示されるか?
画像の縦横比が同じなら上記のCSSでOK。
縦横比か異なる場合は、他の画像とどのようにそろえるのかを明確にしてもらう必要があります。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/19 10:54