BinaryDevelop
  1. ホーム
  2. css

[解決済み】フレックスボックスで1つのアイテムを右に揃えるには？

2022-03-26 15:53:43

質問

https://jsfiddle.net/vhem8scs/

フレックスボックスで2つの項目を左揃え、1つの項目を右揃えにすることは可能ですか？リンク先ではより明確に示されています。最後の例は、私が実現したいものです。

フレックスボックスでは、コードのブロックは1つです。floatではコードのブロックが4つあります。これが、私がフレックスボックスを好む理由の 1 つです。

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;
}

解決方法は？

フレックスチャイルドを1つだけ右寄せにするには margin-left: auto;

から フレックス仕様 :

主軸のオートマージンの用途のひとつに、フレックスアイテムの分離があります。 を明確なグループに分けることができます。次の例では、この方法を使用しています。 よくあるUIのパターン、つまり、1本のバーにアクションを表示し、その中のいくつかは 左寄せと右寄せがあります。 

.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 この場合、最後の項目が右側に押し出されます。( デモ )

しかし、明らかに違うのは、真ん中の項目が必要以上に大きくなっていることです。フレックスアイテムにボーダーを追加して、その違いを見てみましょう。

デモ 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します