如何左右对齐flexbox列？

一尘不染

如何左右对齐flexbox列？

css

使用典型的CSS，我可以在两列之间向左浮动另一列，并在两者之间留出一定的间距。我该如何使用flexbox？

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

阅读 264

2020-05-16

共1个答案

一尘不染

您可以添加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>

您也可以添加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>

2020-05-16