web-dev-qa-db-ja.com

flexbox列を左右に揃える

典型的なcssを使用してflexboxの使用方法を学習すると、2つの列のうちの1つを左に、もう1つを右に浮かせることができます。フレックスボックスでどうすればいいですか？

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}
<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>
htmlcsscss3flexbox
81
archytect

justify-content: space-betweenを親要素に追加できます。そうすることで、子flexboxアイテムは、それらの間にスペースを空けて反対側に揃えられます。

更新された例

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}
<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

また、2番目の要素にmargin-left: autoを追加して、右に揃えることもできます。

更新された例

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}
<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>
200
Josh Crozier

結果を達成するために4つの方法を思いつきました。 デモ

方法1：

#a {
    margin-right: auto;
}

方法2：

#a {
    flex-grow: 1;
}

方法3：

#b {
    margin-left: auto;
}

方法4：

#container {
    justify-content: space-between;
}
26
geniuscarrier

さまざまな方法がありますが、最も簡単なのはスペースを使用することです。最後の例を参照してください

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

例を参照

0
Ali Adravi

別のオプションは、残りのスペースを埋めたいタグの間にflex: autoスタイルで別のタグを追加することです。

https://jsfiddle.net/tsey5qu4/

HTML：

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

CSS：

.fill-remaining-space {
  flex: auto;
}

これはflex：1 1 autoと同等で、主軸に沿って余分なスペースを吸収します。

0
konyak