BinaryDevelop
  1. ホーム
  2. html

[解決済み] フレックスボックスの列を左右に揃えるには？

2022-04-22 21:15:11

質問

一般的なCSSでは、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>

解決方法は？

を追加することができます。 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: auto を2番目の要素に追加して、右寄せにします。

更新例 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します