フレックスボックスアイテム間の距離を設定するより良い方法

フレックスボックスのアイテム間の最小距離を設定するために、.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>
Salman A
編集された質問 3日 12月 2018 в 7:27
プログラミング
css3 css flexbox
17日 12月 2013 в 5:35
15 ビュー
ソリューション
  • Flexboxには折りたたみ式の余白がありません。
  • Flexboxにはテーブルのborder-spacingのようなものはありません（CSSプロパティのgapを除いて、ほとんどのブラウザではサポートされていませんcaniuse）。

したがって、あなたが求めているものを実現するのは少し難しいです。

私の経験では、:first-child/:last-childを使用せず、flex-wrap:wrapに変更を加えずに動作する最もクリーンな方法は、コンテナにpadding:5pxを設定し、子にmargin:5pxを設定することです。これにより、各子の間、および各子とその親の間に10pxのギャップが生じます。

[デモ](http://jsfiddle.net/7XD8s/)

.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>
Flimm
編集した答え 21日 9月 2019 в 3:42
解説 (9)

透明なボーダーを使うことができます。

私は、古いブラウザ用にテーブル＋テーブルセルモデルにフォールバックできるフレックスグリッドモデルを構築しようとして、この問題を考えました。テーブルセルには余白がありません。

e.g.

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

また、フレックスボックスには min-width: 50px; が必要であることにも注意してください。フレックスモデルでは、固定したい特定の子要素に flex: none; を適用しない限り、固定サイズを処理できないため、"flexi" から除外されます。 http://jsfiddle.net/GLpUp/4/ しかし、すべての列を flex:none; でまとめたものは、もはやフレックスモデルではありません。 フレックスモデルに近いものを紹介します。http://jsfiddle.net/GLpUp/5/

つまり、古いブラウザでテーブルセルのフォールバックを必要としない場合は、普通にマージンを使うことができます。http://jsfiddle.net/GLpUp/3/

background-clip: padding-box;`を設定することは、背景を使用する際に必要となります。

Tracker1
編集した答え 15日 3月 2017 в 11:03
解説 (9)

パーセンテージを使って、マージンで幅を調整するのが一番簡単な方法だと思います。

つまり、先ほどの例であれば、以下のようになります。

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

つまり、値が幅に応じて決まるということですが、これは誰にとっても良いことではありません。

解説 (1)