Bagaimana cara menyelaraskan kolom flexbox ke kiri dan kanan?

123

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>

Luaskan cuplikan

html css flexbox

— arsitek
sumber

279

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

Tampilkan cuplikan kode

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

Luaskan cuplikan

— Josh Crozier
sumber

4

Hai, dapatkah Anda menjelaskan bagaimana elemen tersebut disejajarkan dengan benar menggunakan di margin-left: autosini?

— hulkinBrain

2

@hulkinBrain, berikut penjelasannya: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

CATATAN: margin-left: autodan margin-right: autotrik IE11 tidak kompatibel, bagi mereka yang masih harus mendukungnya.

— TetraDev

30

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

— geniuscarrier
sumber

9

Metode 5: Masukkan elemen kosong ekstra di flex:1;mana pun Anda ingin ruang ekstra berada :)

— adamdport

Ini akan menjadi jawaban terbaik dan terlengkap jika Anda menyematkan cuplikan kode alih-alih menautkan ke jsfiddle.

— styfle

Metode 1 dan 3 tidak kompatibel dengan IE 11!

— Peter Højlund Andersen

1

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.

— konyak
sumber

0

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

— Ali Adravi
sumber