フレックスボックスで、2つのアイテムを左寄せ、1つのアイテムを右寄せにすることは可能ですか?リンク先では、よりわかりやすく説明されています。最後の例は、私が実現したいことです。
flexboxでは、コードのブロックは1つです。floatではコードが4ブロックになります。これが、フレックスボックスを好む理由のひとつです。
HTML。
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
CSS
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
フレックスチャイルドを右に寄せるには、margin-left: auto;
と設定します。
flex spec][1]より。
主軸のオートマージンの使い方としては、フレックスアイテム 主軸のオートマージンの使い方としては、フレックスアイテムを個別の"グループ"に分けることです。次の例では、これを使って よくあるUIパターンを再現しています。 アクションの1つのバーで、あるものは左に並び、あるものは右に並ぶというよくあるUIパターンを再現しています。
.wrap div:last-child {
margin-left: auto;
}
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div:last-child {
margin-left: auto;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
注意してください。
中間のフレックスアイテムに flex-grow:1 を設定して (または短縮形の flex:1
)、最後のアイテムをずっと右に押し出すことで、同様の効果を得ることができます。([デモ][3])
しかし、明らかな違いは、真ん中のアイテムが必要以上に大きくなってしまうことです。フレックスアイテムにボーダーを追加して違いを確認してみましょう。
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div {
border: 3px solid tomato;
}
.margin div:last-child {
margin-left: auto;
}
.grow div:nth-child(2) {
flex: 1;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap margin">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div class="wrap grow">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
簡潔で純粋なフレックスボックスオプションの場合は、左揃えのアイテムと右揃えのアイテムをグループ化します。
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
とし、space-between
を使用します。
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
こうすることで、複数のアイテムを右にまとめることができます(1つだけでもOK)。