Penyelarasan Elemen Individual dalam Model Flex di CSS

Properti berikutnya yang akan kita pelajari, tidak lagi ditetapkan pada induk elemen flex, melainkan pada elemen itu sendiri. Mari kita bahas properti align-self, yang menyelaraskan suatu blok individual sepanjang sumbu silang.

Misalkan kita memiliki blok-flex yang disusun secara berbaris. Mari sejajarkan mereka secara vertikal ke tengah, dengan menetapkan align-items ke nilai center, lalu berikan kelas tambahan elem pada elemen kedua dan untuk elemen tersebut, berikan penyelarasan yang berbeda, misalnya, rekatkan ke tepi atas.

Untuk melakukan ini, pada elemen kita dengan kelas elem atur properti align-self ke nilai flex-start:

html<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

css.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.elem {
  align-self: flex-start;
}

Результат: