CSS sejajarkan satu item tepat dengan flexbox


212

https://jsfiddle.net/vhem8scs/

Apakah mungkin untuk memiliki dua item sejajar kiri dan satu item lurus kanan dengan flexbox? Tautan menunjukkannya dengan lebih jelas. Contoh terakhir adalah apa yang ingin saya capai.

Di flexbox saya punya satu blok kode. Dengan float, saya memiliki empat blok kode. Itulah salah satu alasan mengapa saya lebih suka flexbox.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

Jawaban:


525

Untuk menyelaraskan satu anak flex ke kanan atur denganmargin-left: auto;

Dari spec fleksibel :

Salah satu penggunaan margin otomatis pada poros utama adalah memisahkan item fleksibel menjadi "grup" berbeda. Contoh berikut menunjukkan cara menggunakan ini untuk mereproduksi pola UI umum - satu bar tindakan dengan beberapa selaras di sebelah kiri dan yang lainnya selaras di sebelah kanan.

.wrap div:last-child {
  margin-left: auto;
}

Biola diperbarui

catatan:

Anda dapat mencapai efek yang sama dengan mengatur pertumbuhan fleksibel: 1 pada item flex tengah (atau steno flex:1) yang akan mendorong item terakhir sampai ke kanan. ( Demo )

Namun perbedaan yang jelas adalah bahwa item tengah menjadi lebih besar dari yang seharusnya. Tambahkan perbatasan ke item fleksibel untuk melihat perbedaannya.

Demo


Terima kasih! Saya mencoba hal lain yang berhasil sebelum saya membaca ini. Itu untuk mengatur flex-grow: 1 pada elemen yang seharusnya mendorong yang lain. Itu bekerja juga. Apakah Anda tahu yang mana yang lebih baik dan mengapa?
Jens Törnell

2
Jawaban yang bagus Jadi margin tidak memakan ruang tambahan, dan flex: 1 tidak. Keren!
Jens Törnell

4
@ JensTörnell, automargin menggunakan ruang kosong dalam wadah untuk memisahkan item fleksibel. The flex-grow/ flexproperti membutuhkan ruang yang kosong, memberikan ke item flex, yang mengembang dengan jumlah tersebut. Seperti yang disebutkan oleh Danield, metode terakhir membuat item fleksibel DUA lebih besar, yang mungkin tidak Anda inginkan.
Michael Benjamin

12
Tidak semua pahlawan memakai jubah.
Tom

2
@ user1063287 untuk menyelaraskan banyak elemen ke kanan, cukup terapkan margin-kiri: otomatis pada elemen pertama yang perlu disejajarkan dengan benar. Jadi katakanlah Anda ingin 4 elemen terakhir disejajarkan ke kanan, Anda akan melakukan ini: div:nth-last-child(4) { margin-left: auto } codepen.io/danield770/pen/ERyoar
Danield

37

Untuk opsi kotak fleksibel murni, kelompokkan item rata kiri dan kanan kanan:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

dan gunakan space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

Dengan cara ini Anda dapat mengelompokkan beberapa item ke kanan (atau hanya satu).

https://jsfiddle.net/c9mkewwv/3/


Ini berfungsi, tetapi jika Anda tidak mengubah elemen di dalam setiap grup menjadi display: inline;atau display: inline-block;, maka mereka akan ditumpuk alih-alih semua dalam satu baris seperti flexbox jika tidak akan memilikinya.
The DIMM Reaper

@TheDIMMReaper Saya tidak yakin saya melihat masalahnya. Bisakah Anda berkembang?
spflow

Maksud saya bagaimana Anda mengubah tag segera membungkus Onedan Twodari divs ke spans - jika masih display: block;maka mereka akan mengalir ke baris yang terpisah. Karena OP awalnya memiliki divs, saya hanya ingin menunjukkan bahwa hanya menempatkannya di dalam yang lain divtidak akan berfungsi tanpa mengubah tampilan tag asli.
The DIMM Reaper

1
Ya, karena elemen-elemen sekarang turun satu tingkat, display: flextidak lagi mempengaruhi tata letak mereka. Jika Anda ingin menggunakan div, ya, inlineatau inline-blockakan berhasil. Tetapi juga, jelas, flexkarena kita menggunakannya untuk default flex-direction: rowdengan div induk sudah. ex. jsfiddle.net/ynbb5964/2
spflow

Terima kasih, saya mencoba menyelaraskan diri: flex-end, tetapi mengapa itu tidak berhasil?
Anand

3

Untuk menyelaraskan beberapa elemen (headerElement) di tengah dan elemen terakhir ke kanan (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.