これは私が欲しいものです:
私が持っている最も近いもの flexboxアイテムにマージンを適用し、最初と最後の子から半分を削除します。
問題は、:first-child
が常に視覚的に最初であるとは限らないことです。これは、レイアウトの順序を変更する可能性があるためです( example )。
マージンを適用する際に視覚的な順序を考慮する方法はありますか?
すべてのボックスに同じマージンを設定してから、コンテナでこれを元に戻すことができます。
これを置き換えます:
.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; }
同じことをする別の方法があります。
.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }
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);
}
各フレックススペース内にいくつの要素があるかわからなかったので、これにアプローチするためにやったこと。たとえば、Drupalテーマを作成しており、4つの領域が横に並んでいますが、3つの領域のみにコンテンツがある場合でも、全幅を占めるようにします。
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;
}
これは私にそのようなレイアウトを残します(さを無視して、色はデモンストレーションするだけです):
「半分」、「3分の1」、「4分の1」など、他のクラスがいくつか追加され、より小さな画面や大きな画面で物事が反応しやすくなります。
Flexを使用するもう1つの確実な点は、残りのスペースに使用する戦略を指定できることです。
.container {
justify-content: space-between;
}
あなたの質問に固執しよう:
マージンを適用する際に視覚的な順序を考慮する方法はありますか?
いいえ、たとえば、背景色の値に基づいて要素のスタイルを設定することはできません。そのためには、カスタムクラスを作成してフレックスの順序を設定し、それに基づいてサブクラスを作成できます。
間隔に関するソリューションを投稿したこの興味深いスレッドをチェックしてください: flexboxアイテム間の距離を設定するより良い方法
負のマージンを持つラッパーdivを使用して、目的のレイアウトを実現できます。
.flex-wrapper{
margin: -20px;
}