web-dev-qa-db-ja.com

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

フレックスボックスアイテム間の最小距離を設定するために、私は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>

csscss3flexbox
482
Sasha Koss
  • Flexboxには折りたたみマージンがありません。
  • Flexboxには、テーブルのborder-spacingに似たものは何もありません。

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

私の経験では、: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>

263
user652649

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

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

透明な枠線を使用できます。

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

例えば.

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

Flexboxには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;を設定する必要があります。そうしないと、背景が透明な境界領域に流れ込むためです。

74
hexalys

flexboxとcss calc（）

こんにちは、下記はflexboxをサポートしているすべてのブラウザ用の私の解決策です。マイナスのマージン、ハック、回避策、純粋なCssはありません。

Fiddleデモ

   
.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-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

67
Dariusz Sikorski

これは複数の行や要素の数があってもすべての場合に有効です。

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>

この方法の欠点はモバイルにあります Opera Mini はサポートされません。PCではこれは IE11 の後にのみ機能します。

古い答え

欲しい場合は、常にCSS兄弟の組み合わせを使用できます。

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

上記のコードはうまくいくでしょう。このメソッドでは、margin: 0 -5px;を#boxラッパーに指定する必要はありません。 

あなたのためのワーキングサンプル： 

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

36
weBBer

私はcssのpreceded byセレクタ~に基づいており、不定ネスティングを可能にする解決策を見つけました。

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

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

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

17
Simon Epskamp

Sawaの答えから続けて、これはあなたが周囲のマージンなしで項目間の固定間隔を設定することを可能にするわずかに改良されたバージョンです。

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>
14
chris

あなたがアイテムの間に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>

flex wrap を許可したい場合は、次の例を参照してください。

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>

12
Stickers

& > * + *セレクタを使って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>

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

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

11
Do Async

これは折り返し幅と固定幅の列に使用しました。ここで重要なのは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サンプル

9
Veiko Jääger

フレックスコンテナwith -x（マイナス）マージンおよびフレックスアイテムwith 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;
}
9
Tim

やがて彼らはgapプロパティをflexboxに追加するでしょう。それまでは、代わりにCSSグリッドを使用し、すでにgapプロパティを使用し、単一行を使用することができました。マージンを扱うよりも優れています。 

6
o-t-w

このようにしないでください。

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

これは、 隣接兄弟セレクタ を使用して、最初のものを除くすべての.item要素をmargin-leftにします。 flexboxのおかげで、これも同じように幅広い要素をもたらします。これは、垂直方向に配置された要素とmargin-topでももちろん可能です。

4
tillsanders

私のソリューションでの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>

4
iClusterDev

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

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

3
wutzebaer

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

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

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

3
MK10

Flexboxでは、特にラッピングが関係しているときは、溝を作成するのは面倒です。

負のマージンを使用する必要があります（ 質問のように ）。

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

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

どのような場合でも、flexboxには "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省略形）をグリッドコンテナで指定すると、grid 行とグリッド列の間の溝を定義します。それらの構文は CSS Box Alignment 3 §8 Box Between Boxes で定義されています。

これらの特性の効果は、影響を受けたグリッド線が太さを獲得したかのようです。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>

詳しくは：

3
Michael_B

Columnify - N列のソロクラス

FlexboxとSCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

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

Flexboxと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 で再生してください。

2
zurfyx

2番目の.item + .itemから一致させるには、セレクタで.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>

2
Andrew Luca

これは、柔軟なボックスを使用してスペースを入れたカードUI要素のグリッドです。

enter image description here

私はiffyの結果でパディングとマージンを操作することによって手動でカードをスペーシングすることに失望しました。それで、これは私が非常に効果的であると思った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>

これが皆さん、現在、そして未来に役立つことを願っています。

1
buildpax

と仮定します。

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

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

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

これは、flexboxの最後の行に関する問題に対する適切な回避策です。

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

1
Salman A

これを実行するには、確かに、きちんとした、CSS専用の方法があります（「より良い」と考えるかもしれません）。

ここに投稿されたすべての答えのうち、私はcalc（）をうまく使用したものだけを見つけました（Dariusz Sikorskiによる）。しかし、「最後の行に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
aequalsb

これを行う最も簡単な方法は、パーセンテージを使用し、マージンを広げて幅を広げることです。

あなたがあなたの例を使っている場合、これはあなたが結局このような何かで終わることを意味します

#box {
   display: flex;
}

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

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

1
lukefrake

私は早く同じ問題に出くわし、それからこれに対する答えにつまずいた。それが将来の参考のために他の人を助けることを願っています。

長い答えを短くするには、あなたの子供のフレックスアイテムにボーダーを追加します。そして、あなたは好きなものにフレックスアイテム間のマージンを指定することができます。あなたが好きなら '透明'を使用することができます。

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

ボックスコンテナのネガティブマージントリックは非常にうまくいきます。これは、秩序、ラッピング、そしてそうでないものでうまく機能する別の例です。

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

0
cghislai

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

0
Amo Wu

どのような場合でもうまくいくとは限りませんが、柔軟な子の幅（％）があり、1行あたりの項目数がわかっている場合は、nth-childセレクタを使用して必要な要素の余白を非常に明確に指定できます。

それはあなたが「より良い」という意味に大きく依存します。この方法では、子要素や否定要素に追加のラッパーマークアップは必要ありません。

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>

0
jnmrobinson

ハックを見つけたのは、自分自身が本当に必要だからです。

/* grid */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Nice flex growカテゴリもある投稿グリッドです。あなたはそれが欲しいと思う。 Codepenを参照

0
Keviin Cosmos

フレックスアイテムの間隔は、コンテナによって固定された方向にのみ設定します。フレックスコンテナが左から右に流れるように設定されている場合（flex-direction:row）、最後のものを除いて、その子には right マージンのみを設定します。

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

.flex-lr > *:not(:last-child){
    margin-right:5px;
}

これは一見したところうまくいくように見えるかもしれませんが、待ってください！ justify-contentがstartまたはend以外の値に設定されている場合、これは行われるべきではありません。他のすべての値はすでにそれら自身でスペースを分配しているからです。

商品が折り返された場合はどうなりますか？次に、適切な交差軸側にもスペースを追加する必要があります。しかし、コンテナがその子のラップを許可しているかどうかを知る方法は？ wrap-reverseはどうですか？ 

こうしたことすべてを考慮すると、これは簡単な作業ではなく、それを超える小さなステップが必要であると思いました。

私のアプローチは、flexboxのラッパーとして機能する一連の短いクラスの構築に基づいています。これにはいくつかの利点があります。

  1. それはすべてのベンダープレフィックスを一点に「集中」し、それを忘れることを可能にします。
  2. Flexboxのプロパティを1つのクラスにまとめたり、flexboxで使用されている言葉の名前を変更したりすることができます。
  3. これらのクラスを使用すると、それらが依存しているflexプロパティの値に基づいて他のクラスを書くことができます。例えば。流れの方向、交差軸の配置、折り返しなどに基づいて間隔を設定できます。

フレックスボックスがどのように機能するのかを理解し、フレックスボックスの素晴らしさを実感するために、これらすべてを試すためのフレックスボックスデザイナーを作成しました。

http://algid.com/Flex-Designer

そのため、以下では、私が使用するクラスと1つのフロー方向の間隔（マージン）の有用性を見つけて要約します。あなたは他の人を推論するか、または上記のリンクでそれらを見つけることができるでしょう。簡潔にするため、ここではベンダープレフィックスを省略しています。

/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}

/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}

/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}

/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}

/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}

/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}

そして今ここに私たちをもたらしたもの：アイテム間のスペース：

/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}

/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}

/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}

最後に、マークアップは次のようになります。

<div class="flex-lr cross-align-center fm-3">
    <div>
        Some content here...
    </div>
    <div>
        A bit more stuff here...
    </div>
    <div class="flex-tb fm-3">
        <div>
            Now vertical content
        </div>
        <div>
            etc.
        </div>
    </div>
</div>

これが私が大声でコードを呼ぶものです。

0
Mario Vázquez