###前提・実現したいこと
@mediaで600px以上になったときにdisplay:flexを使用して5つの画像を横並びにしたいです。
600px以下のときの画像の配置は1つだけwidth:100%で他の2つは半分ずつ表示されるようにしています。
###発生している問題・エラーメッセージ
他の場所でもdisplay:flexを利用して2つずつ並べている画像を1列(合計4つ)になるようにしておりそちらはうまくいきます。
しかし、この箇所だけうまくいかず、何も変化がおきません。
初心者のため至らない点があるかもしれませんが、宜しくお願いいたします。
###該当のソースコード
html
1<div class="flexbox2"> 2 <a href="" alt=""> 3 <p><img src="../images/aaa.jpg"></p> 4 <p><img src="../images/bbb.svg" alt=""></p> 5 </a> 6 <a href="" alt=""> 7 <p><img src="../images/aaa.jpg"></p> 8 <p><img src="../images/bbb.svg" alt=""></p> 9 </a> 10 <a href="" alt=""> 11 <p><img src="../images/aaa.jpg"></p> 12 <p><img src="../images/bbb.svg" alt=""></p> 13 </a> 14 <a href="" alt=""> 15 <p><img src="../images/aaa.jpg"></p> 16 <p><img src="../images/bbb.svg" alt=""></p> 17 </a> 18 <a href="" alt=""> 19 <p><img src="../images/aaa.jpg"></p> 20 <p><img src="../images/bbb.svg" alt=""></p> 21 </a> 22</div>
css
1.flexbox2 { 2 height: 100%; 3 display: flex; 4 justify-content: space-between; 5 flex-wrap: wrap; 6 align-items: center; 7 align-content: center; 8} 9 10.flexbox2 a:first-of-type { 11 flex: 0 0 100%; 12} 13 14.flexbox2 a:nth-of-type(n+2) { 15 flex: 0 0 48%; 16} 17 18@media screen and (min-width:599px) { 19 .flexbox2 a { 20 flex: 0 0 18%; 21 } 22} 23 24
回答1件
あなたの回答
tips
プレビュー