#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

justify-content mempunyai lima nilai:

• flex-start (lalai)
• flex-end
• pusat
• ruang-antara
• ruang-sekitar

Dalam semua kes, tiga div berada pada baris yang sama. Untuk penerangan bagi setiap nilai, lihat: https://stackoverflow.com/a/33856609/3597276

Kebaikan flexbox:

1. Jumlah kod yang rendah dan sangat cekap
2. Pemusatan menegak dan mendatar adalah mudah
3. Lajur kontur sangat mudah
4. Pelbagai pilihan untuk menyelaraskan elemen flex
5. Responsif
6. Tidak seperti pelampung dan meja, pelampung dan meja mempunyai keupayaan susun atur yang terhad kerana ia tidak pernah digunakan untuk membina reka letak, Flexbox ialah teknologi moden (CSS3) dengan pelbagai pilihan.

Ketahui lebih lanjut tentang flexbox:

• Cara menyelaraskan item Flex
• Menggunakan CSS flexbox ~ MDN
• Panduan Lengkap untuk Flexbox ~ CSS-Tricks
• Apakah itu Flexbox? ! ~ Tutorial video YouTube

Sokongan Pelayar: Flexbox disokong oleh semua pelayar utama, kecuali IE < 10. Beberapa versi penyemak imbas terbaharu, seperti Safari 8 dan IE10, memerlukan awalan vendor. Untuk menambah awalan dengan cepat, gunakan Autoprefixer. Lihat jawapan ini untuk butiran lanjut.