フレックスアイテムを右揃えする方法は？

680

「連絡先」を右揃えにするよりフレックスボックス風の方法はありますposition: absoluteか？

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
スニペットを展開

http://jsfiddle.net/vqDK9/

html  css  flexbox 
— マークボルダー
ソース
2
floatを右に使用できますが、同じ方法です...！最良の方法は、text-alignで表示テーブルを使用することです。
— Yohann Tilotti 2014年
もちろん、それがより良い場合は。それでも「連絡先」の右揃えに問題がある：jsfiddle.net/vqDK9/1
— Mark Boulder
2
私はあなたのフィドルjsfiddle.net/vqDK9/2
— Yohann Tilotti 2014年
少なくとも2つの方法があります。stackoverflow.com
— Michael Benjamin

回答:

452

どうぞ。justify-content: space-betweenフレックスコンテナーに設定します。

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>
スニペットを展開

— ケビン・サトル
ソース
291
またはjustify-content: flex-end
— BT
1
.cの幅を300pxに設定してみてください。タイトルは中央揃えではなくなりました。そう、これは質問に答えますが、これはデザインを壊します。
— アガメムス2017年
22
これは、.c::after疑似要素がある場合など、常に期待どおりに機能するとは限らないことに注意してください。私の経験でmargin-left: auto;は、行く方法です。
— ウィル
13
またはflex-flow: row-reverse;
— jchook 2018
8
フレックスコンテナー内の1つのアイテムだけを配置したくない場合、これが正しい答えであるとは思いません。
— Foxhoundn
1097

より柔軟なアプローチは、auto左マージンを使用することです（フレックスアイテムは、自動マージンをブロックフォーマットコンテキストで使用する場合とは少し異なります）。

.c {
    margin-left: auto;
}

更新されたフィドル：

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
スニペットを展開

— 漂流
ソース
2
ありがとう。個人的には、上のYohann Tilottiの表表示方法よりもこれを好みますか もしそうなら、なぜですか？
— Mark Boulder、
4
@MarkBoulder：互換性の理由から彼の方法の方が優れていますが、すでにflexboxを使用している場合、私の答えはより理にかなっています。
— 2014年
4
@MarkBoulder：この場合、どちらも同じことを行います。利点は、（表アプローチは持たないことフレックスアイテムに関連する他の特性（および挙動）を有することになるflex、orderなど）。
— 2014年
3
要素をラップできず、最後の3つを右にフロートさせる必要がある場合は、このmargin-left: auto;スタイルのみで最後から3番目のものをターゲットにします。
— Daniel Sokolowski、2017
2
@ジャスティンはそれを理解しました、それらをラップする必要はありません-私の場合はできませんでした。解決策は、でのみ、3つのアイテムの1番目をターゲットにすることでしたmargin-left: auto;。
— Daniel Sokolowski 2017
41

あなたはこのためにフレキシボックスを使用する場合は、これを行うことによって、のことができるように（必要がありdisplay: flex、コンテナ上flex: 1のアイテムの上に、そしてtext-align: right上.c）：

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

...または代わりに（さらに簡単）、アイテムが満たす必要がない場合はjustify-content: space-between、コンテナで使用してtext-alignルールを完全に削除できます。

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

以下は、Codepenのデモで、上記をすぐに試すことができます。

— ニックF
ソース
2
space-betweenまさに私が探していたものでした、ありがとう！
— Eddie Fletcher
2番目の提案、予想される動作を使用すると境界線が消えますか？ codepen.io/oshihirii/pen/RygKRd
— user1063287
38

フィラーを使用して残りのスペースを埋めることもできます。

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

3つの異なるバージョンでソリューションを更新しました。これは、追加のフィラー要素を使用することの妥当性についての議論のためです。コードを省略して実行すると、すべてのソリューションが異なる動作をすることがわかります。たとえば、アイテムbにフィラークラスを設定すると、このアイテムは残りのスペースを埋めます。これには、クリックできない「デッド」スペースがないという利点があります。

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
スニペットを展開

— アルノ
ソース
3
最後にフレキシボックスを理解誰か
— Kokodoko
9
@Kokodokoええ、もう1つの非セマンティックhtml要素を使用して別の要素を移動することは、フレックスボックスを理解する上で最も重要です...
— Zanshin13
@ Zanshin13他のすべての回答は、あまりにも多くの余分なcssを書き込むので、フレックスコンテナーを省略して、すべてを自分でコーディングすることもできます:)
— Kokodoko
2
@Kokodoko justify-content: space-betweenは真剣に「そんなに」CSSですか？これ以上のコメントは必要ありません（ただし、必要に応じて、チャットへようこそ）。この答えは解決策なので、ここにいる権利があります。しかし、間違いなく最適なものではありません。Idk、おそらくあなたは気づかなかったかもしれませんが、別の回答からのcssのほとんどはOPであり、回答は実際に著者のcssの量を（少し）減らします。この回答には他よりも少ないCSSはありません（OPのCSSなしで動作しません-jsfiddle.net/63ma3b56）。しかし、もう1つのhtml要素があります。
— Zanshin13
19

簡単です

.main {
    display: flex;
    flex-direction:row-reverse;
}
— CESCO
ソース
12

次のCSSクラスをスタイルシートに追加します。

.my-spacer {
    flex: 1 1 auto;
}

左側の要素と右揃えする要素の間に空の要素を配置します。

<span class="my-spacer"></span>

— アンドレイスロブ
ソース
単一の要素を右揃えにしたくないだけでなく、1つの要素を左揃えにし、別の要素を（同じフレックスレイアウト内で）右揃えしたい場合は、この方法が適しています。
— ジェームズ先生
8

ヘッダーのように1つのアイテムを左揃えにする必要があるが、3つの画像のように複数のアイテムを右揃えにする必要がある場合は、次のようにします。

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

これは次のようになります（上記のスニペットには、関連性の高いCSSのみが含まれていました）。

ここに画像の説明を入力してください

— TetraDev
ソース
4

「justify-content：flex-end」をフレックスコンテナーに追加すると問題が解決し、「justify-content：space-between」では何も実行されないことがわかりました。

— 夜
ソース
2

AngularとFlex-Layoutを使用している場合は、flex-itemコンテナーで以下を使用します。

<div fxLayout="row" fxLayoutAlign="flex-end">

こちらのfxLayoutAlignドキュメントとこちらの完全なfxLayoutドキュメントをご覧ください。

— リンダウソン
ソース
0

TetraDevによる 回答に基づくコード例

右の画像： 

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}
<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>
スニペットを展開

左の画像： 

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}
<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>
スニペットを展開

— 1.21ギガワット
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.