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>

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

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

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

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

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

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>

Cuplikan Codepen

Ini bisa sangat berguna untuk Footer Desktop.

Seperti yang dilakukan Envato di sini dengan logo perusahaan.

Cuplikan Codepen