Làm thế nào để căn chỉnh các cột flexbox trái và phải?

Với CSS điển hình, tôi có thể thả nổi một trong hai cột sang trái và cột khác bên phải với một số khoảng trống ở giữa. Làm thế nào tôi sẽ làm điều đó với 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>

Bạn có thể thêm justify-content: space-betweenvào phần tử mẹ. Khi làm như vậy, các mục flexbox trẻ em sẽ được căn chỉnh về các phía đối diện với khoảng cách giữa chúng.

Ví dụ cập nhật

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

Bạn cũng có thể thêm margin-left: autovào phần tử thứ hai để căn chỉnh nó ở bên phải.

Ví dụ cập nhật

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

Tôi đã đưa ra 4 phương pháp để đạt được kết quả. Đây là bản demo

Phương pháp 1:

#a {
    margin-right: auto;
}

Phương pháp 2:

#a {
    flex-grow: 1;
}

Phương pháp 3:

#b {
    margin-left: auto;
}

Phương pháp 4:

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

Một tùy chọn khác là thêm một thẻ khác có flex: autokiểu vào giữa các thẻ mà bạn muốn điền vào khoảng trống còn lại.

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

Điều này tương đương với tự động flex: 1 1, hấp thụ bất kỳ không gian thừa nào dọc theo trục chính.

Có nhiều cách khác nhau nhưng đơn giản nhất là sử dụng khoảng trắng giữa xem ví dụ ở cuối

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

xem ví dụ