フレックスボックスのアイテム間の最小距離を設定するために、.item
にはmargin: 0 5px
を、コンテナにはmargin: 0 -5px
を使用しています。私にとってはハックのように思えますが、他に良い方法が見つかりません。
[例][1].
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
border-spacing
のようなものはありません(CSSプロパティのgap
を除いて、ほとんどのブラウザではサポートされていませんcaniuse)。したがって、あなたが求めているものを実現するのは少し難しいです。
私の経験では、:first-child
/:last-child
を使用せず、flex-wrap:wrap
に変更を加えずに動作する最もクリーンな方法は、コンテナにpadding:5px
を設定し、子にmargin:5px
を設定することです。これにより、各子の間、および各子とその親の間に10px
のギャップが生じます。
[デモ](
).upper
{
margin:30px;
display:flex;
flex-direction:row;
width:300px;
height:80px;
border:1px red solid;
padding:5px; /* this */
}
.upper > div
{
flex:1 1 auto;
border:1px red solid;
text-align:center;
margin:5px; /* and that, will result in a 10px gap */
}
.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
透明なボーダーを使うことができます。
私は、古いブラウザ用にテーブル+テーブルセルモデルにフォールバックできるフレックスグリッドモデルを構築しようとして、この問題を考えました。テーブルセルには余白がありません。
e.g.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
また、フレックスボックスには min-width: 50px;
が必要であることにも注意してください。フレックスモデルでは、固定したい特定の子要素に flex: none;
を適用しない限り、固定サイズを処理できないため、"flexi"
から除外されます。
flex:none;
でまとめたものは、もはやフレックスモデルではありません。
フレックスモデルに近いものを紹介します。http://jsfiddle.net/GLpUp/5/
つまり、古いブラウザでテーブルセルのフォールバックを必要としない場合は、普通にマージンを使うことができます。http://jsfiddle.net/GLpUp/3/
background-clip: padding-box;`を設定することは、背景を使用する際に必要となります。