☰

フレックスボックスの列を左右に揃えるにはどうすればいいですか? 質問する

tag-icon • tag-icon html css flexbox
フレックスボックスの列を左右に揃えるにはどうすればいいですか? 質問する

一般的な CSS では、2 つの列のうち 1 つを左に、もう 1 つを右にフロートさせ、その間にガター スペースを空けることができます。これを flexbox で実現するにはどうすればよいでしょうか。

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>

ベストアンサー1

justify-content: space-between親要素に追加することができます。そうすることで、子のフレックスボックス項目は、間にスペースを置いて反対側に揃えられます。

更新された例

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

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

更新された例

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

おすすめ記事