web-dev-qa-db-ja.com

CSSが1つの項目をflexboxと正しく揃える

https://jsfiddle.net/vhem8scs/

Flexboxでは、2つの項目を左に揃え、1つの項目を右に揃えることはできますかリンクはそれをより明確に示しています。最後の例は私が達成したいものです。

Flexboxには1ブロックのコードがあります。 floatを使うと、4ブロックのコードができます。それが私がflexboxを好む理由の一つです。

_ 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;
}
cssalignmentflexbox
133
Jens Törnell

1人のflexの子を右に揃えるにはmargin-left: auto;を使って設定します

フレックススペックから ：

主軸の自動マージンの用途の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:1）にflex-grow：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>
349
Danield

簡潔で純粋なフレックスボックスオプションの場合は、左揃えの項目と右揃えの項目をグループ化します。

<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つだけ）にグループ化できます。

https://jsfiddle.net/c9mkewwv/3/ /

26
spflow

いくつかの要素（headerElement）を中央に配置し、最後の要素を右に配置する（headerEnd）。

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}
1
Satvik Vats