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

この記事の翻訳元：フレックスボックスアイテム間の距離を設定するためのより良い方法

距離は最小限にするフレキシボックスアイテムのセットとの間で私が使用していますmargin: 0 5pxON .itemとmargin: 0 -5pxONコンテナを。 私はフレキシボックスを使用するアイテム間の最小距離を設定するにはmargin: 0 5px上.itemとmargin: 0 -5pxコンテナを。 私にとってはハックのように見え ますが、これを行うためのより良い方法を見つけることができません。私にとってはこれはハックのようですが、これを行うためのより良い方法を見つけることができません。

例 例

 #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> 

---

＃1階

参照：https : //stackoom.com/question/1OXwT/フレキシブルボックスアイテム間の距離を設定するより良い方法

---

＃2F

• Flexboxには折りたたみマージンがないため、 Flexboxの利益率は低下していません。
• Flexboxにはborder-spacingテーブルのようなものはありません（gapほとんどのブラウザー、caniuseでサポートされていないCSSプロパティを除く） Flexboxとテーブルのborder-spacing間に違いはありません（CSSプロパティを除きgap、ほとんどのブラウザーは十分にサポートされていません） CSSプロパティgap、カニユーズ）

したがって、あなたが求めていることを達成することはもう少し難しい です。

私の経験では、:first-child/ :last-childを使用せず、何も変更せずに機能する「クリーン」な方法flex-wrap:wrapはpadding:5px、コンテナとmargin:5px子に設定することです。 私の経験では、:first-child/ :last-childを使用せずflex-wrap:wrap、「クリーン」に変更を加えていません。実施形態は、容器上に設けられpadding:5pxたサブにおいて、padding:5pxオンセットmargin:5px。 これにより、10px 各子の間、および各子とその親の間にギャップが生じます。これにより、各子の間、および各子とその親の間にギャップが生じます。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> 

---

＃3階

透明なボーダーを使用できます透明なボーダー を使用できます

古いブラウザのテーブル+テーブルセルモデルにフォールバックできるフレックスグリッドモデルを構築しようとしているときにこの問題を提案しました。フレックスグリッドモデルを構築しようとする ときにこの問題を検討しました 。モデルを古いロールバックできます。ブラウザのテーブル+テーブルセルモデル。そして、カラムガターのボーダーは、私には最適の選択であるように思われました 。 つまり 、テーブルセルにはマージンがありません。つまり、テーブルセルにはマージンがありません。

例えば 例えば

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

またmin-width: 50px; 、フレックスボックスが必要であることにmin-width: 50px; 注意してください。フレックスモデルは、固定サイズを処理しませんあなたが行う場合を除き、あなたがない限り、それ以外の場合は、フレックスモデルは固定サイズに対処しません特定の子要素でONあなたはそのためのような固定から除外されたい。特定のサブ要素では、あなたが固定したいので除きますで。http://jsfiddle.net/GLpUp/4/しかし、すべての列とhttp://jsfiddle.net/GLpUp/4/を一緒にすると、すべての列がFlexモデルではなくなり、Flexモデルではなくなります。：クローサーAには、ここで何か壁紙フレックスモデルですhttp://jsfiddle.net/GLpUp/5/コンテンツフレックスモデルに近いです：HTTP：//jsfiddle.net/GLpUp/5/ flex: none; flex: none;flex: none; "flexi" "flexi" flex:none; flex:none;

したがって、 古いブラウザーのテーブルセルフォールバックが必要ない場合は、実際にマージンを通常使用できます。したがって、古いブラウザーのテーブルセルフォールバックが必要ない場合は、実際にマージンを通常使用できます。http://jsfiddle.net/GLpUp/3/ http://jsfiddle.net/GLpUp/3/

設定background-clip: padding-box; 設定すると、background-clip: padding-box; 背景を使用する場合、必要になりそうでない場合、バックグラウンドが透明境界領域に流入するように 、必要な背景を使用する場合、そうでなければ透明な背景が境界領域に流入します。

---

＃4F

私はこれを行う 最も簡単な方法はパーセンテージを使用し、マージンを幅に合わせることを許可するだけです。最も簡単な方法はパーセンテージを使用し、マージンを許可して幅を増やすことだけです。

あなたのようなもので終わるこの手段あなたの例を使用したところ、これはあなたがあれば 、この手段を使用すると、サンプルを使用する場合は、同様の結果で終わること

#box {
   display: flex;
}

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

値が幅に基づいていることを 意味しますが、すべての人に適しているわけではありません。値が幅に基づいていることを意味しますが、これはすべての人に当てはまるとは限りません。

---

＃5F

さわの答えから進んで 、これは周囲のマージンなしでアイテム間の固定間隔を設定できるようにするわずかに改善されたバージョンです。さわの答えから続けて、これはアイテムの間で設定できるように少し改善されたバージョンです空白を囲むことなく間隔を修正しました。

http://jsfiddle.net/chris00/s52wmgtq/49/ http://jsfiddle.net/chris00/s52wmgtq/49/

Safariの「-webkit-flex」バージョンも含まれていますSafariの「-webkit-flex」バージョンも含まれてい ます。

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

---

＃6階

これはハックではありません。 これはハッカーではありません。 同じ手法がブートストラップとそのグリッドでも使用されます が、ブートストラップはマージンの代わりにcolsにパディングを使用します。bootstrapは、colsに空白ではなくパディングを使用しますが、同じ方法がbootstrapとグリッドで使用されます。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}