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

781

コンテナ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>
スニペットを展開

css  flexbox 
— サーシャコス
ソース
29
これはハックではありません-アイテムを整列させるための意図された方法の1つです。ただし、他のプロパティもあります。w3.org/TR/css3-flexbox/#alignment
— BoltClockを
4
ええ、私は理解しています。しかし、例えば私たちのコンテナからの制御距離に能力を与えるものコラムギャップ特性があります：w3.org/TR/css3-multicol/#column-gap
— サーシャコス
原因は、フレックスボックスのマージンの崩壊です。他の質問は、[フレックスボックスの最後のマージンの崩壊を停止するにはどうすればよいですか？]（stackoverflow.com/questions/38993170/…）
— Jack Yang
6
CSSボックス整合モジュールレベル3は、上のセクションが含まボックス間のギャップを複数列の要素に適用される- フレックスコンテナ、およびグリッドコンテナを。したがって、最終的には次のように簡単になりますrow-gap: 5px。
— Danield
2
@JohnCarrell firefoxは実際には既にgapフレックスコンテナ（caniuse）のプロパティをサポートしています
— Danield

回答:

428
  • Flexboxには折りたたみマージンはありません。
  • Flexboxにはborder-spacing、テーブルのようなものはありません（gapほとんどのブラウザー、caniuseで十分にサポートされていないCSSプロパティを除く）

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

私の経験では、: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>
スニペットを展開

— すべての労働者は不可欠です
ソース
220
これは質問が尋ねるのと同じことを達成しません、あなたは左端と右端に10pxのインデントを持っています、私は彼らがそうするつもりではないと仮定しています。したがって、元の質問の負のマージン。
— Chris Nicola、
17
orderプロパティが設定されている場合はどうですか？:first-child/:last-child期待どおりに動作しません。
— Guria
4
「フレックスボックスには折りたたみマージンがありません。」非常に洞察力があり、明らかに本当ですが、引用をお願いしてもよいですか？
— chharvey
2
これは元の質問よりも悪い答えではありませんか？この方法では、コンテナの周囲にスペースが必要であり、ガターは常に偶数でなければなりません。
— limitlessloop
7
@chharvey、スペックw3.org/TR/css-flexbox-1/#item-marginsから、「隣接するフレックスアイテムのマージンは崩れません。」
— ロメレム2017年
197

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

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
— ルメリス・ジョージ
ソース
1
このメソッドの唯一の問題は、背景色で高さが等しいアイテムを維持することです。による絶対配置でheight:100%; width:100%は、アイテムのパディングは無視されます。
— Steven Vachon
3
ここでの問題はIE10と11にありflex-basisます。値はを考慮しないためbox-sizing: border-box、パディングまたは境界線を持つ子は親をオーバーフローします（この場合はラップします）。出典
— Carson
18
このアプローチには別の問題があります。このようにマージンを調整すると、ページ幅が拡大する可能性があります。デモ：jsfiddle.net/a97tatf6/1
— Nathan Osman
4
これはハックではないことに同意しますが、何かが広く使用されているという事実は、それがハックではないことを意味しません。ポリフィル、一時的なセキュリティパッチ、16進編集などを参照
— William
15
もちろんこれはハックです。Bootstrapがこの方法を使用するからといって、それがハックではないという意味ではありません。これは、Bootstrapがハックを使用することを意味します。
— マイケルベンジャミン
108

複数の行をサポートするFlexboxおよびCSS Calc

こんにちは、以下はflexboxをサポートするすべてのブラウザに対する私の実用的なソリューションです。負のマージンはありません。

フィドルデモ

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
スニペットを展開

SASSを使用すると、このコードは短くなる可能性があることに注意してください。

2020.II.11を更新し、左の最後の行の列を整列

アップデート2020.II.14最後の行のmargin-bottomを削除

— ダリウス・シコルスキ
ソース
13
私はこのソリューションが好きですが、最後の行に2つのアイテムしかない場合は失敗します。のため、アイテムは一緒に積み重ねられませんjustify-content。
— James Brantly、2017年
4
2つのアイテムの問題を修正するには、justify-content: space-evenly;またはに変更しjustify-content: space-around;ます。
— ポールルーニー、
6
@PaulRooney複数のリストがあるサイトでは、リストがCMSによって生成されている場合、アイテムの数が常にわかるとは限りません。
— NinjaFart 2018
1
@ 1.21gigawatts他人のコード/回答に恣意的な変更を加えないでください。代わりに独自の答えを書いてください。
— TylerH
2
@TylerHそれは恣意的ではなかった。「フレックスボックスアイテム間の距離を設定するには...」という質問です。この答えは、側溝のサイズを示していません。背景色を設定すると、ガターが表示されます。境界線を追加すると、最後の行の下にマージンがあることがわかります。
— 1.21ギガワット
93

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

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

例えば

.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;なってフレックスモデルではなくなりました。これはflexモデルに近いものです：http : //jsfiddle.net/GLpUp/5/

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

background-clip: padding-box;背景を使用する場合は、背景が透明な境界領域に流れ込むため、設定が必要になります。

— hexalys
ソース
5
素晴らしい答え。フレックスボックスでは余白の使用方法が異なる（余分なスペースを吸収するなど）ため、透明な境界線は、余白のような動作で
— 折り返す
4
背景色を使用する場合を除き、背景が希望の境界を超えています。
— ahnbizcad 2015
2
@ahnbizcadさまざまな背景色がありますが、背景の方向に応じて白または適切な色を使用できます。
— hexalys 2015
27
@ahnbizcad：あなたはIE8のサポートを必要としない場合、これはよりよい解決策である：background-clip: padding-box
— アルビン
5
ここのアルビンのコメントにはもっと投票が必要です！これが最良の解決策です。background-clipと組み合わせた透明なボーダー：padding-box（および必要に応じて、適切なエッジの配置のためにコンテナーの負のマージン）は、完璧なソリューションです。IE8はとにかくflexboxをサポートしないので、バックグラウンドクリップのサポートの欠如は問題ではありません。
— ブライアン
74

このソリューションは、複数の行や要素がいくつあっても、すべてのケースで機能します。しかし、セクションの数は、最初の行に4が必要で、3が2行目と同じである必要があります。これは、4番目のコンテンツのスペースが空白になり、コンテナーが埋められないためです。

使用しています display: grid; とそのプロパティ。

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

この方法の欠点はMobile Opera Miniにあり、PCではIE10以降でのみ機能します。

IE11を含む完全なブラウザ互換性に関する注意はAutoprefixerを使用してください

古い答え

それを古いソリューションと考えないでください。単一行の要素だけが必要で、すべてのブラウザで機能する場合は、それでも最高のソリューションの1つです。

このメソッドはCSSの兄弟の組み合わせで使用されるため、他の多くの方法で操作することもできますが、組み合わせが間違っていると問題が発生する可能性もあります。

.item+.item{
  margin-left: 5px;
}

以下のコードがトリックを行います。このメソッドではmargin: 0 -5px;、#boxラッパーに渡す必要はありません。

あなたのための実用的なサンプル：

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

— weBBer
ソース
グリッドベースの回答を編集して、最終行の項目が少なくても正しく機能することを示しました。それがその場合に機能することを証明するため。（この変更が気に入らない場合は、遠慮なく元に戻してください。）
— ToolmakerSteve
この質問に従って、彼らはハックなしで子要素でスペースを適切に埋めることだけを求めてきました、それは私がやったことであり、グリッドを使用して、grid-template-columns動的ではなく定義したとおりに管理できます。したがって、値を指定1fr 1fr 1fr 1frすると、divが分割され4fractions、それぞれの子要素を埋めようとfractionsしgridます。私の知識では、それが唯一の方法です。私が答えで述べたのは、ユーザーがdivを4に分割し、複数の行でも多くの要素でそれらを使用する必要がある場合、それgidは役立つことです。
— weBBer
69

& > * + *セレクタとして使用して、flex-gap（単一行の）をエミュレートできます。

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}
<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>
スニペットを展開

フレックスラッピングをサポートする必要がある場合は、ラッパー要素を使用できます。

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>
スニペットを展開

— 非同期にする
ソース
3
きれいな溶液。任意の数のflex子要素で機能します。
— KonradGałęzowski
1
これは私が探していたものだったと👍私のために素晴らしい仕事
— ポール・オデオン
ただし、注意すべき点は、*演算子は期待どおりに具体性を高めないことです。そのため、既存のcssに応じて、.flex > *セレクターの特異性を高めるか、!importantその要素にマージンを適用する他のセレクターがある場合はルールに追加する必要があります。
— ポールオデオン
ベストソリューション👍
— O01
26

10pxアイテム間にスペースを設定したい場合は.item {margin-right:10px;}、すべてに設定して最後のアイテムでリセットすることができます.item:last-child {margin-right:0;}

また、一般的な兄弟~または次の+兄弟セレクターを.item ~ .item {margin-left:10px;}使用して、最初のものを除くアイテムに左マージンを設定するか、.item:not(:last-child) {margin-right: 10px;}

Flexboxは非常に賢いので、グリッドが自動的に再計算され、均等に分散されます。

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
スニペットを展開

フレックスラップを許可する場合は、次の例を参照してください。

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
スニペットを展開

— ステッカー
ソース
6
アイテムがラップされている場合、これは:last-child機能しません。行末のすべての最後の子には影響しないためですよね？
— Flimm 2017年
2
@Flimmフレックスラップを使用するアプローチを追加しました。上記の2番目の部分を参照してください。
— ステッカー2019
私へのベストアンサー...シンプル、クリーン、効率的！フレックスラップで完全に動作しました。ありがとう
— MatthieuMarcé19年
16

一般的な兄弟セレクターに基づいており、~無限のネストが可能なソリューションを見つけました。

実際の例については、このコードペンを参照してください

基本的に、列コンテナー内では、別の子が前にあるすべての子が上部マージンを取得します。同様に、すべての行コンテナー内で、他の子が先行するすべての子には、左マージンがあります。

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}
<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>
スニペットを展開

— サイモン・エプスカンプ
ソース
これにより、マージンがグローバルに適用されないため、アイテムのサイズが異なります。
— Steven Vachon
また、モバイルでは少し変に見えるため、小さな画面を処理するためにいくつかの追加のCSSを追加する必要があります。.box〜.boxルールを大きな画面に適用し、小さな画面の場合は.boxクラスに最大幅を設定します100％とマージンの底。
— rhysclay 2017年
14

さわの答えから進んで、これは、周囲のマージンなしでアイテム間の固定間隔を設定できるようにするわずかに改善されたバージョンです。

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

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>
— クリス
ソース
2
これは本質的に質問で与えられた例と同じではありませんか？
— フォード
9

これを、ラップされた固定幅の列に使用しました。ここでの鍵はcalc()

SCSSサンプル

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

完全なCodepenサンプル

— ヴェイコイェーガー
ソース
2
これにより、最初の項目の前と最後の項目の後にガターが追加され、OPによって負のマージンが使用されなくなります。
— ハーマン、2016年
2
フレキシボックスは、IE 11に「フレックス」の項目内の計算値（）をサポートしていません
— アダムŠipický
常に使用することはできません。直接の子供のために必要な国境もあると想像してみてください
— アンドリス
9

フレックス容器と-x（負）マージンとフレックスアイテムとX（正の）マージンまたはパディング所望の視覚的結果の両方のリードが：フレックスアイテムが持つ2倍の一定の間隙のみの間で互いに。

フレックスアイテムでマージンを使用するかパディングを使用するかは、単に好みの問題のようです。

この例では、固定ギャップを保持するために、フレックスアイテムが動的にスケーリングされます。

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}
— ティム
ソース
3
聞き取れませんでした。質問で直接言われていない新しい答えは何ですか？
— ユーザーの
まず、既存の回答はどちらか一方しか言及していないため、flex-itemのマージンとパディングの両方が望ましい結果につながるということをまとめたいと思いました。次に、フレックスアイテム自体をスケーリングすることでギャップが保持される例を挙げたいと思います。
— Tim
この効果を示すコードペンの例を次に示します。codepen.io/dalgard/pen/Dbnus
— pedalpete
6

CSS gapプロパティ：

複数列、フレックスボックス、グリッドレイアウト用の新しいgapCSSプロパティがいくつかのブラウザーで機能するようになりました！（リンク1を使用できるか、リンク2を参照してください）。

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

執筆時点では、これは悲しいことにFirefoxでのみ機能します。現在、「実験的なWebプラットフォーム機能を有効にする」を有効にすると、Chromeで動作しますabout:flags。

— フリム
ソース
5

私のソリューションでFlexboxを使用しjustify-contentて、親要素（コンテナー）のflex-basisプロパティを使用し、アイテムのプロパティ内のマージンを指定しました。以下のコードスニペットを確認してください。

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}
<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>
スニペットを展開

— iClusterDev
ソース
5

フレックスボックスを使用すると、特にラッピングが含まれる場合、溝を作成するのは面倒です。

（質問に示されているように）負のマージンを使用する必要があります：

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

...またはHTMLを変更します（別の回答に示されているように）：

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... または、他の何か。

いずれの場合でも、フレックスボックスには「flex-gap」機能が提供されていないため、機能させるには醜いハックが必要です（少なくとも今のところは））です。

ただし、ガターの問題は、CSSグリッドレイアウトを使用するとシンプルで簡単です。

グリッド仕様は、アイテムとコンテナーの間のスペースを無視しながら、グリッドアイテム間にスペースを作成するプロパティを提供します。これらのプロパティは次のとおりです。

  • grid-column-gap
  • grid-row-gap
  • grid-gap （上記の両方のプロパティの省略形）

最近、仕様はCSS Box Alignment Moduleに準拠するように更新されました。これは、すべてのボックスモデルで使用するための一連の配置プロパティを提供します。したがって、プロパティは次のとおりです。

  • column-gap
  • row-gap
  • gap （略記）

ただし、すべてのグリッド対応ブラウザーが新しいプロパティをサポートしているわけではないため、以下のデモでは元のバージョンを使用します。

また、アイテムとコンテナの間にスペースが必要な場合はpadding、コンテナでうまく機能します（下のデモの3番目の例を参照）。

スペックから：

10.1 樋：row-gap、column-gap、およびgap プロパティ

row-gapそしてcolumn-gapプロパティ（およびそれらのgapグリッドコンテナに指定された場合略記）、グリッドの行とグリッド列間の樋を画定します。それらの構文はCSS Box Alignment 3§8ボックス間のギャップで定義されています。

これらのプロパティの効果は、影響を受けるグリッドラインが厚さを取得したかのようです。2つのグリッドライン間のグリッドトラックは、それらを表す側溝間のスペースです。

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}
<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

詳しくは：

— マイケル・ベンジャミン
ソース
4

次のようにしてみませんか。

.item + .item {
    margin-left: 5px;
}

これは、隣接する兄弟セレクターを使用して.item、最初の要素を除くすべての要素をaにしmargin-leftます。flexboxのおかげで、これにより、要素の幅も等しくなります。これは、垂直方向に配置された要素およびを使用して行うこともできmargin-topます。

— 耕作者
ソース
8
これは、フレックスアイテムが常に1行にある限り機能します。ラッピングが許可されている場合は、おそらく十分ではありません。
— ニックF
4

これが私の解決策です。子要素にクラスを設定する必要はありません。

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

使用法：

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

上記のインラインの例に加えて、同じ手法を通常のフレックスの行と列に使用でき、4px以外の間隔のクラスで拡張できます。

— MK10
ソース
4

私はそのような場合に+演算子をよく使用します

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

— Wutzebaer
ソース
3

これを行う最も簡単な方法は、パーセンテージを使用して、マージンで幅を合計できるようにすることです

これは、例を使用している場合、このようなものになってしまうことを意味します

#box {
   display: flex;
}

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

あなたの値が幅に基づいていることを意味しますが、それは誰にとっても良いことではないかもしれません。

— ルークフレーク
ソース
このソリューションに出くわしただけで、うれしいです。少なくとも私の場合は機能します（面白いと思う人のためのペン：codepen.io/rishatmuhametshin/pen/XXjpaV）。
— rishat
2

以下は、フレキシブルボックスを使用して完成した間隔を持つカードUI要素のグリッドです。

ここに画像の説明を入力してください

私はパディングとマージンを操作して手作業でカードの間隔を空けることに不満を感じていました。これが、私が非常に効果的であるとわかったCSS属性の組み合わせです。

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}
<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>
スニペットを展開

これが人々の現在と将来に役立つことを願っています。

— buildpax
ソース
更新：この間隔は、特定の配置（中央、左など）を必要とするモバイルレンダリングHTML要素に効果的です。モバイル開発にフレックスボックスを使用していることに気付いた場合は、純粋にマージンベースの配置に切り替えると安心しました。
— buildpax 2017
2

Columnify-N列のソロクラス

フレックスボックスとSCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

フレックスボックスとCSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}
<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>
スニペットを展開

それで遊ぶJSFiddle。

— ズルフィクス
ソース
1 

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

— アモ・ウー
ソース
1

.item + .itemセレクタで使用するだけで、2番目から一致します.item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
スニペットを展開

— アンドリュールカ
ソース
1

仮定：

  • 折り返し付きの4列グリッドレイアウトが必要
  • アイテム数は必ずしも4の倍数である必要はありません

1番目、5番目、9番目などを除くすべてのアイテムに左マージンを設定します。各アイテムに固定幅を設定します。左マージンが10pxの場合、各行には4つのアイテム間に30pxのマージンがあります。アイテムのパーセンテージ幅は次のように計算できます。

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

これは、フレックスボックスの最後の行に関連する問題に対する適切な回避策です。

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
スニペットを展開

— サルマンA
ソース
1

確かに、これを行うには、CSS専用のきれいで整然とした方法があります（「より良い」と考える方がよいでしょう）。

ここに投稿されたすべての回答のうち、（Dariusz Sikorskiによる）calc（）の使用に成功した回答のみを見つけました。しかし、「最後の行に2つの項目しかない場合は失敗します」と提示された場合、拡張されたソリューションはありませんでした。

このソリューションは、負のマージンの代わりにOPの問題に対処し、Dariuszに提起された問題に対処します。

ノート：

  • この例は、3列のレイアウトのみを示しています
  • これはcalc()、ブラウザに計算を実行させるために使用します- 100%/3 （33.3333％も同様に機能するはずです）、および (1em/3)*2 （.66emも機能するはずですが）ですが。
  • ::after列よりも要素が少ない場合、最後の行を埋めるために使用します

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}
<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
スニペットを展開

また、https：//codepen.io/anon/pen/rqWagE

— 等しい
ソース
1

新しいプロパティを使用できますgap。この記事で見つけた説明と詳細情報をコピーして貼り付けます

CSSグリッドレイアウトには、以前からギャップ（以前はgrid-gap）がありました。子要素の周囲の間隔ではなく、包含要素の内部の間隔を指定することにより、ギャップは多くの一般的なレイアウトの問題を解決します。たとえば、ギャップがある場合、子要素のマージンが含まれている要素のエッジの周りに不要な空白を引き起こすことを心配する必要はありません。

残念ながら、現時点では、FireFoxのみがフレックスレイアウトのギャップをサポートしています。

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
スニペットを展開

— アンドレス・ポール
ソース
gapここの回答ですでに推奨されていましたstackoverflow.com/a/58041749/2756409また、これはCSSではありません。
— TylerH
0

すべてのケースで機能するわけではありませんが、子の幅（％）が柔軟で、行ごとのアイテム数がわかっている場合は、次のコマンドを使用して、必要な要素のマージンを非常に明確に指定できます。 nth-child selector / s。

それは、あなたが「より良い」という意味に大きく依存します。この方法では、子要素またはネガティブ要素のラッパーマークアップを追加する必要はありませんが、これらはどちらにも位置があります。

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}
<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>
スニペットを展開

— jnmrobinson
ソース
応答しない。固定幅の親に対してのみ機能します。
— グリーン
1
OPはレスポンシブソリューションを要求せず、例では修正幅を使用しています。これは％値を使用するので、項目はパーセンテージで設定された親のサイズに適応するため、これが応答性があると主張するのは簡単です。
— jnmrobinson 2017
0

私は以前に同じ問題に出くわしましたが、その答えに出くわしました。それが将来の参照のために他の人を助けることを願っています。

長い答えは短く、子のflex-itemに境界線を追加します。次に、フレックスアイテム間のマージンを好きなように指定できます。スニペットでは、説明のために黒を使用していますが、必要に応じて「透明」を使用できます。

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>
スニペットを展開

— チューニング
ソース
0

ボックスコンテナーの負のマージントリックは、非常にうまく機能します。次に、順序付け、ラッピングなどでうまく機能する別の例を示します。

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}
<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>
スニペットを展開

— cghislai
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.