จะจัดคอลัมน์ Flexbox ซ้ายและขวาได้อย่างไร?

ด้วย CSS ทั่วไปฉันสามารถลอยหนึ่งในสองคอลัมน์ไปทางซ้ายและอีกคอลัมน์หนึ่งทางขวาโดยมีช่องว่างระหว่างราง ฉันจะทำอย่างไรกับ 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>

คุณสามารถเพิ่ม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>

ฉันคิด 4 วิธีเพื่อให้บรรลุผล นี่คือการสาธิต

วิธีที่ 1:

#a {
    margin-right: auto;
}

วิธีที่ 2:

#a {
    flex-grow: 1;
}

วิธีที่ 3:

#b {
    margin-left: auto;
}

วิธีที่ 4:

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

อีกทางเลือกหนึ่งคือการเพิ่มแท็กอื่นที่มี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 ซึ่งดูดซับช่องว่างพิเศษใด ๆ ตามแกนหลัก

มีหลายวิธี แต่ง่ายที่สุดคือการใช้ช่องว่างระหว่างดูตัวอย่างในตอนท้าย

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

ดูตัวอย่าง