web-dev-qa-db-ja.com

フレックスアイテムを右寄せにするには？

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/

htmlcsshtml5css3flexbox
512
Mark Boulder

どうぞ。フレックスコンテナに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>
332
Kevin Suttle

もっと柔軟なアプローチは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>
949
Adrift

これにflexboxを使用したい場合は、次のようにします（コンテナの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の demo です。これを使ってすぐに試すことができます。

32
Nick F

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

<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>
28
Arno

あるいはjustify-content: flex-endを使うこともできます

.main { display: flex; }
.c { justify-content: flex-end; }
25
Melchia

と同じくらい簡単

.main {
    display: flex;
    flex-direction:row-reverse;
}
15
CESCO

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
}

これは次のようになります（上記のスニペットに含まれているのはrelavent CSSだけです）。

enter image description here

6
TetraDev

次のCSSクラスをスタイルシートに追加してください。

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

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

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

6
andreisrob

'justify-content：flex-end'は価格ボックスコンテナ内で動作しました。

.price-box {
    justify-content: flex-end;
}
3
Mohammad Adeel

Flexコンテナに 'justify-content：flex-end'を追加しても問題は解決するが、 'justify-content：space-between'は何もしないことがわかりました。

3
nights

AngularおよびFlex-Layoutを使用している場合は、flex-itemコンテナで以下を使用してください。

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

FxLayoutAlign docs here および完全なfxLayout docs here を参照してください。

2
Lindauson

このソリューションは動作するはずです

.main{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
}

.main .c{
margin-left: auto;
order: 2;
}
<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>
0
Monir

TetraDevによる answer に基づくコード例

右側の画像：

* {
  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>
0
1.21 gigawatts