2017-08-12 11 views
3

画像に余白があるようにしたいので、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>

スクリーンショット:

enter image description here

私はこのケースで何ができますか?ありがとうございます

+0

余白が子供に設定する必要があり、フレックスラップ行の間で「ガター」を設定するための他の方法はありません。表示:グリッド;フレックスではなく、このオプション(グリッドギャップ)があります。 ;) '.portfolio_pic img {margin:X;}'は私自身の謙虚な意見でこれを達成する最も一貫した方法です:) –

答えて

1

あなたがしようとしていることは、ge flexboxフレックスライン間めの設定スペースは(あなたが興味を持っている場合related issue hereを参照してください) - あなたはこれらのルールを追加できます:

    垂直スペースへ
  1. align-content: space-aroundフレックスラインを

  2. height: 100%は、portfolio divの高さを占有します。

参照の下のデモ:

#portfolio { 
 
    background-color: #00C3A9; 
 
    height: 800px; 
 
} 
 
.portfolio_pic { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
    align-content: space-around; 
 
    height: 100%; 
 
}
<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>

+1

これは、すべての画像タグに十分なスペースがある場合にのみ機能します。スペースが限られている場合、垂直方向の間隔はなくなります。 –

+0

@JanNahodyこれは、スペースが制限されているときにOPが管理したいことに依存します - オーバーフロー*かどうか... – kukkuz

+0

動的変数を処理するにはFlexが必要です。ここでOPは固定サイズを設定する必要があります。申し訳ありませんが、これはフレックスの解決策ではありません。フィックスサイズを使用すると、フレックスは必要ありません。 –

2

フレックスは一次元です。したがって、justify-content: space-aroundを使用すると、定義された次元でそれを管理します。行または列。 画像要素にマージンを与えない理由は何ですか?

#portfolio { 
 
    background-color: #00C3A9; 
 
    height: 800px; 
 
} 
 
.portfolio_pic { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 

 
img { 
 
    margin: 20px; 
 
}
<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>

3

あなたは、そのクラスのよう

img { margin-top: 15px; } 

のようにあなたのイメージにマージンを追加してみてくださいまたはSOのようなそのスタイルを持つクラスを作成し、各画像を与えることができる:

.imagesingrid { margin-top: 15px; } 
<img class="imagesingrid" src="http://via.placeholder.com/350x300" alt=""> 
関連する問題