Bagaimana menjustifikasi satu item flexbox (menimpa konten justify)

283

Anda dapat mengganti align-itemsdengan align-selfuntuk item fleksibel. Saya mencari cara untuk mengganti justify-contentitem fleksibel.

Jika Anda memiliki wadah flexbox justify-content:flex-end, tetapi Anda menginginkan item pertama justify-content: flex-start, bagaimana bisa dilakukan?

Ini paling baik dijawab oleh posting ini: https://stackoverflow.com/a/33856609/269396

css flexbox Mahk
sumber
2
Gunakan automargin. Lihat kotak # 26 di sini: stackoverflow.com/a/33856609/3597276
Michael Benjamin
Terima kasih telah menautkan ke jawaban yang paling bermanfaat!
Brady Dowling

Jawaban:

549

Sepertinya tidak ada justify-self, tetapi Anda dapat mencapai pengaturan hasil serupa yang sesuai margindengan auto¹. E. g. untuk flex-direction: row(default) Anda harus mengatur margin-right: autountuk menyelaraskan anak ke kiri.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>
Luaskan cuplikan

¹ Perilaku ini ditentukan oleh spesifikasi Flexbox .

Pavlo
sumber
51
Teknik ini sangat bagus dan juga bekerja dalam arah vertikal. Misalnya, Anda ingin elemen terakhir di dalam wadah dengan ketinggian tetap menempel di bagian bawah. Anda dapat menggunakan `` `.container {flex-direction: kolom; justify-content: flex-start} .last-item {margin-top: auto} `` `
Christian Schlensker
6
@krulik Perilaku ini ditentukan oleh spesifikasi Flexbox, lihat w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins
Pavlo
7
Setelah beberapa penyelidikan lebih lanjut, justify-selfmungkin tidak ada hubungannya dengan flexboxtetapi digunakan dengan css gridstetapi saya tidak yakin. Sepertinya saya tidak bisa menjalankannya di Chrome dengan flexbox.
Jake Wilson
8
Bagaimana jika saya ingin satu item berada di sebelah kiri, dan yang lainnya di tengah?
Fahmi
3
"Dalam tata letak flexbox, properti ini diabaikan" - diambil dari dokumen mozilla tentang pembenaran diri
Finlay Percy
19

AFAIK tidak ada properti untuk itu dalam spesifikasi, tapi di sini adalah trik yang saya gunakan: mengatur elemen wadah (yang dengan display:flex) untuk justify-content:space-around Kemudian menambahkan elemen tambahan antara item pertama dan kedua dan mengaturnya ke flex-grow:10(atau beberapa nilai lain yang bekerja dengan pengaturan Anda)

Sunting: jika item-itemnya benar-benar sejajar, sebaiknya tambahkan flex-shrink: 10;elemen tambahan juga, sehingga tata letak akan responsif dengan benar pada perangkat yang lebih kecil.

eeglbalazs
sumber
1
Itu bekerja tanpa menentukan lebar (setidaknya itu terjadi dalam situasi saya)
eeglbalazs
Cobamin-width: 0
The Dembinski
13

Jika Anda tidak benar-benar dibatasi untuk menjaga semua elemen ini sebagai saudara kandung node Anda dapat membungkus orang-orang yang pergi bersama-sama di kotak flex default lain, dan memiliki wadah keduanya menggunakan ruang-antara.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>
Luaskan cuplikan

Atau jika Anda melakukan hal yang sama dengan flex-start dan flex-end terbalik Anda hanya menukar urutan wadah default-flex dan anak tunggal.

borkx
sumber
5

Sepertinya justify-selfakan segera datang ke browser . Sudah ada artikel di MDN . Pada saat penulisan ini, dukungan browser buruk.

Mengenai solusi margin: Saya memiliki kisi Flexbox dengan celah. Tidak ada flex-gapproperti (belum?) Dengan Flexbox. Jadi untuk talang, saya menggunakan bantalan dan margin, jadi margin: autoperlu menimpa margin lainnya ...

Frank Lämmer
sumber
7
Sedihnya,In flexbox layouts, this property is ignored
Sphinxxx
1
@Sphinxxx Ya, tapi justify-self tidak bekerja dalam display: gridwadah. Baru-baru ini seperti flexbox, jadi memungkinkan pemosisian yang kaya seperti align-items,, align-selfserta beberapa fitur tambahan seperti yang kami butuhkan di sini justify-self,. Apa yang saya rekomendasikan adalah menggunakan flexbox di mana pun mencukupi, tetapi jika tidak ada sesuatu, kemungkinan besar grid memiliki apa yang Anda cari. (mis. menyelaraskan satu anak dengan center-x dan centre-y, dan yang lain ke kanan-x centre-y - flexbox margin-left: automudah untuk kiri + kanan, tetapi tidak di tengah + kanan) Contoh: stackoverflow.com/a/57128453 / 2441655
Venryx
1

Untuk situasi di mana lebar item yang ingin Anda flex-endketahui, Anda dapat mengatur kelenturannya menjadi "0 0 ## px" dan mengatur item yang Anda inginkan flex-startdenganflex:1

Ini akan menyebabkan flex-startitem semu mengisi wadah, cukup format ke text-align:leftatau apa pun.

Mahk
sumber
0

Saya memecahkan kasus serupa dengan mengatur gaya item dalam ke margin: 0 auto.
Situasi: Menu saya biasanya berisi tiga tombol, dalam hal ini mereka perlu justify-content: space-between. Tetapi ketika hanya ada satu tombol, sekarang akan di tengahkan alih-alih ke kiri.

Mikros
sumber