web-dev-qa-db-ja.com

flexboxアイテム間の間隔

これは私が欲しいものです：

flex with spacing

私が持っている最も近いもの flexboxアイテムにマージンを適用し、最初と最後の子から半分を削除します。

問題は、:first-childが常に視覚的に最初であるとは限らないことです。これは、レイアウトの順序を変更する可能性があるためです（ example ）。

マージンを適用する際に視覚的な順序を考慮する方法はありますか？

csscss3spacingflexbox
54
nice ass

すべてのボックスに同じマージンを設定してから、コンテナでこれを元に戻すことができます。

これを置き換えます：

.flex > * { margin: 0 10px; }    
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

これとともに：

.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }
16
agrm

同じことをする別の方法があります。

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }
7
galki

Rejoy answer は完全に機能しますが、行がロックされているため、レスポンシブ対応ではありません。

flex-flowは新しい友達です。ただし、flexにはバグがないわけではありません。 IEを使用している場合を除き、さまざまなグリッドフレームワークからわかっている負のマージントリックは機能します。しかし、簡単な回避策があります。

作業例： https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

IEのため、ボックスにはflex-basis: autoが付いています。ただし、代わりにwidthを使用できます。

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}
6
dube

編集-私はこのアプローチを使用することをお勧めしません、それはハックです。後世のためにここに置いておきます。

各フレックススペース内にいくつの要素があるかわからなかったので、これにアプローチするためにやったこと。たとえば、Drupalテーマを作成しており、4つの領域が横に並んでいますが、3つの領域のみにコンテンツがある場合でも、全幅を占めるようにします。

  • 各領域に10pxのパディングを与えました
  • テーマの背景色と一致するように各領域の背景色を設定します-私の場合は白です
  • 各領域内にdivを作成しました（それらの間のマージンの錯覚を作成します。

HTMLは次のようになります。

<div class="flexy">
    <div class="region">
       <div class="region-inner">
       </div>
    </div>
</div>

CSSは次のようになります。

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

これは私にそのようなレイアウトを残します（さを無視して、色はデモンストレーションするだけです）： Multi-region layout with spacing between items

「半分」、「3分の1」、「4分の1」など、他のクラスがいくつか追加され、より小さな画面や大きな画面で物事が反応しやすくなります。

2
Mark Conroy

Flexを使用するもう1つの確実な点は、残りのスペースに使用する戦略を指定できることです。

.container {
    justify-content: space-between;
}
1
Pierre Lemée

あなたの質問に固執しよう：

マージンを適用する際に視覚的な順序を考慮する方法はありますか？

いいえ、たとえば、背景色の値に基づいて要素のスタイルを設定することはできません。そのためには、カスタムクラスを作成してフレックスの順序を設定し、それに基づいてサブクラスを作成できます。

間隔に関するソリューションを投稿したこの興味深いスレッドをチェックしてください： flexboxアイテム間の距離を設定するより良い方法

1
Mario Vázquez

負のマージンを持つラッパーdivを使用して、目的のレイアウトを実現できます。

.flex-wrapper{
    margin: -20px;
}

作業コード http://jsfiddle.net/8cju5jpd/

1
Rejoy