Posisikan item flex terakhir di ujung wadah

Question 1

Pertanyaan ini berkaitan dengan browser dengan dukungan css3 penuh termasuk flexbox.

Saya memiliki wadah fleksibel dengan beberapa item di dalamnya. Mereka semua dibenarkan untuk flex-start tetapi saya ingin item terakhir .end dibenarkan untuk flex-end. Adakah cara yang baik untuk melakukan ini tanpa memodifikasi HTML dan tanpa menggunakan pemosisian absolut?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Luaskan cuplikan

Question 2

Modul Tata Letak Kotak Fleksibel - 8.1. Menyelaraskan dengan margin otomatis

Margin otomatis pada item fleksibel memiliki efek yang sangat mirip dengan margin otomatis dalam aliran blok:

Selama kalkulasi basis fleksibel dan panjang fleksibel, margin otomatis diperlakukan sebagai 0.

Sebelum penyelarasan melalui justify-contentdan align-self, setiap ruang kosong positif didistribusikan ke margin otomatis dalam dimensi itu.

Oleh karena itu, Anda dapat menggunakan margin-top: autountuk mendistribusikan ruang antara elemen lain dan elemen terakhir.

Ini akan memposisikan elemen terakhir di bagian bawah.

p:last-of-type {
  margin-top: auto;
}

Tampilkan cuplikan kode

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

Luaskan cuplikan

Demikian juga, Anda juga bisa menggunakan margin-left: autoatau margin-right: autountuk perataan yang sama secara horizontal.

p:last-of-type {
  margin-left: auto;
}

Tampilkan cuplikan kode

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Luaskan cuplikan

Question 3

Prinsip flexbox ini juga bekerja secara horizontal

Selama kalkulasi basis fleksibel dan panjang fleksibel, margin otomatis diperlakukan sebagai 0.
Sebelum penyejajaran melalui konten yang dibenarkan dan penyejajaran sendiri, setiap ruang kosong positif didistribusikan ke margin otomatis dalam dimensi itu.

Menetapkan margin kiri otomatis untuk Item Terakhir akan melakukan pekerjaannya.

.last-item {
  margin-left: auto;
}

Contoh Kode:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Luaskan cuplikan

Cuplikan Codepen

Ini bisa sangat berguna untuk Footer Desktop.

Seperti yang dilakukan Envato di sini dengan logo perusahaan.

Cuplikan Codepen

Answer 1

Pertanyaan ini berkaitan dengan browser dengan dukungan css3 penuh termasuk flexbox.

Saya memiliki wadah fleksibel dengan beberapa item di dalamnya. Mereka semua dibenarkan untuk flex-start tetapi saya ingin item terakhir .end dibenarkan untuk flex-end. Adakah cara yang baik untuk melakukan ini tanpa memodifikasi HTML dan tanpa menggunakan pemosisian absolut?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Luaskan cuplikan

Answer 2

2

Iya. Lihat autoilustrasi margin di sini: stackoverflow.com/a/33856609/3597276

Michael Benjamin

Answer 3

Kemungkinan duplikat dari Sejajarkan elemen ke bawah dengan flexbox

mfluehr

Answer 4

Modul Tata Letak Kotak Fleksibel - 8.1. Menyelaraskan dengan margin otomatis

Margin otomatis pada item fleksibel memiliki efek yang sangat mirip dengan margin otomatis dalam aliran blok:

Selama kalkulasi basis fleksibel dan panjang fleksibel, margin otomatis diperlakukan sebagai 0.

Sebelum penyelarasan melalui justify-contentdan align-self, setiap ruang kosong positif didistribusikan ke margin otomatis dalam dimensi itu.

Oleh karena itu, Anda dapat menggunakan margin-top: autountuk mendistribusikan ruang antara elemen lain dan elemen terakhir.

Ini akan memposisikan elemen terakhir di bagian bawah.

p:last-of-type {
  margin-top: auto;
}

Tampilkan cuplikan kode

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

Luaskan cuplikan

Demikian juga, Anda juga bisa menggunakan margin-left: autoatau margin-right: autountuk perataan yang sama secara horizontal.

p:last-of-type {
  margin-left: auto;
}

Tampilkan cuplikan kode

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Luaskan cuplikan

Answer 5

1

ah sempurna, tidak percaya aku melewatkan itu! Terutama memalukan karena saya benar - benar tahu tentang trik menggunakan-margin-auto-to-center-vertical dan menggunakannya sepanjang waktu

George Mauer

Answer 6

1

@ j08691 Saya tidak memiliki penjelasan formal tentang mengapa ini berhasil, tapi ini mirip dengan bagaimana Anda dapat menggunakan margin: 0 autopemusatan horizontal. Item Flexbox menghormati margin, dan saya yakin itu margin: autopada dasarnya akan memposisikan item dengan jarak sebanyak mungkin di antara saudara kandung. Lihat: w3.org/TR/css-flexbox-1/#auto-margins

Josh Crozier

Answer 7

2

@ jo8691 jika saya tidak salah, margin: autopada item flex memberitahu itu untuk membuat ruang sebanyak mungkin ke arah itu.

George Mauer

Answer 8

1

Spesifikasi mengatakan

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

George Mauer

Answer 9

Saya mencoba mempelajari lebih lanjut tentang flexbox jadi akan sangat bagus untuk melihat referensi yang menjelaskan perilaku ini. Terutama itu juga dimaksudkan dan bukan permainan kata atau efek samping.

j08691

Answer 10

Prinsip flexbox ini juga bekerja secara horizontal

Selama kalkulasi basis fleksibel dan panjang fleksibel, margin otomatis diperlakukan sebagai 0.
Sebelum penyejajaran melalui konten yang dibenarkan dan penyejajaran sendiri, setiap ruang kosong positif didistribusikan ke margin otomatis dalam dimensi itu.

Menetapkan margin kiri otomatis untuk Item Terakhir akan melakukan pekerjaannya.

.last-item {
  margin-left: auto;
}

Contoh Kode:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Luaskan cuplikan

Cuplikan Codepen

Ini bisa sangat berguna untuk Footer Desktop.

Seperti yang dilakukan Envato di sini dengan logo perusahaan.

Cuplikan Codepen

Answer 11

3

Tidak yakin mengapa ini benar-benar berhasil, tetapi itu membantu saya dalam sebuah proyek.

Louis345 tanggal

Answer 12

4

Bagaimana jika saya membutuhkan semua item di tengah dan yang terakhir di sisi kanan?

Illorian

Posisikan item flex terakhir di ujung wadah

Jawaban:

Prinsip flexbox ini juga bekerja secara horizontal