Bu soru, flexbox dahil tam css3 desteğine sahip bir tarayıcıyla ilgilidir.

İçinde bazı öğeler bulunan esnek bir kabım var. Hepsi flex-start için haklı ancak son .end öğenin flex-end'e haklı gösterilmesini istiyorum . Bunu HTML'yi değiştirmeden ve mutlak konumlandırmaya başvurmadan yapmanın iyi bir yolu var mı?

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

Esnek Kutu Yerleşim Modülü - 8.1. Otomatik kenar boşluklarıyla hizalama

Esnek öğelerdeki otomatik kenar boşlukları, blok akışındaki otomatik kenar boşluklarına çok benzer bir etkiye sahiptir:

• Esnek tabanların ve esnek uzunlukların hesaplamaları sırasında, otomatik kenar boşlukları 0 olarak kabul edilir.

• İle hizalanabilmektedir önce justify-contentve align-selfherhangi bir pozitif serbest alanının boyutunun otomatik kenar dağıtılır.

Bu nedenle margin-top: auto, diğer öğeler ve son öğe arasındaki boşluğu dağıtmak için kullanabilirsiniz .

Bu, en alttaki son öğeyi konumlandıracaktır.

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>

Aynı şekilde yatay olarak da aynı hizalama için margin-left: autoveya kullanabilirsiniz margin-right: auto.

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>

Bu flexbox prensibi aynı zamanda yatay olarak da çalışır

Esnek tabanların ve esnek uzunlukların hesaplamaları sırasında, otomatik kenar boşlukları 0 olarak kabul edilir. Yaslama
içeriği ve kendini hizalama yoluyla hizalamadan önce, herhangi bir pozitif boş alan bu boyuttaki otomatik kenar boşluklarına dağıtılır.

Son Öğe için otomatik bir sol kenar boşluğu ayarlamak işi yapacaktır.

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

Kod Örneği:

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

Codepen Snippet

Bu, Masaüstü Altbilgileri için çok yararlı olabilir.

As Envato şirket logosu ile burada yaptı.

Codepen Snippet