画像に余白があるようにしたいので、justify-content: space-around
と書きましたが、上の画像と下の画像の間に余白がありません。フレックスボックスを使用して画像にマージンを与える方法を教えてください。
#portfolio {
background-color: #00C3A9;
height: 800px;
}
.portfolio_pic {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
<div id="portfolio">
<div class="portfolio_pic">
<img src="http://via.placeholder.com/350x300" alt="">
<img src="http://via.placeholder.com/350x300" alt="">
<img src="http://via.placeholder.com/350x300" alt="">
<img src="http://via.placeholder.com/350x300" alt="">
<img src="http://via.placeholder.com/350x300" alt="">
<img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>
スクリーンショット:
私はこのケースで何ができますか?ありがとうございます
余白が子供に設定する必要があり、フレックスラップ行の間で「ガター」を設定するための他の方法はありません。表示:グリッド;フレックスではなく、このオプション(グリッドギャップ)があります。 ;) '.portfolio_pic img {margin:X;}'は私自身の謙虚な意見でこれを達成する最も一貫した方法です:) –