Bagaimana cara menyelaraskan kolom flexbox ke kiri dan kanan?

Dengan CSS khas saya bisa mengapung satu dari dua kolom ke kiri dan kanan lainnya dengan beberapa ruang selokan di antaranya. Bagaimana saya melakukannya dengan 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>

Anda bisa menambahkan justify-content: space-betweenke elemen induk. Dengan demikian, item anak flexbox akan disejajarkan ke sisi berlawanan dengan spasi di antara mereka.

Contoh yang Diperbarui

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

Anda juga bisa menambahkan margin-left: autoelemen kedua untuk menyelaraskannya ke kanan.

Contoh yang Diperbarui

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

Saya menemukan 4 metode untuk mencapai hasil. Ini demo

Metode 1:

#a {
    margin-right: auto;
}

Metode 2:

#a {
    flex-grow: 1;
}

Metode 3:

#b {
    margin-left: auto;
}

Metode 4:

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

Pilihan lainnya adalah menambahkan tag lain dengan flex: autogaya di antara tag Anda yang ingin Anda isi di ruang yang tersisa.

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

Ini sama dengan flex: 1 1 auto, yang menyerap ruang ekstra di sepanjang sumbu utama.

Ada beberapa cara berbeda tetapi yang paling sederhana adalah menggunakan spasi di antara, lihat contoh di bagian akhir

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

lihat contohnya