Алоҳида унсури флекс-модел дар CSS мутавозӣ кардан

Хосиятҳои навбатие, ки мо меомӯзем, дигар ба волидайни унсурҳои флекс таъин намешаванд, балки худи унсурҳо мешаванд. Биёед хосияти aling-self1-ро баррасӣ кунем, ки унсури алоҳидаро дар меҳвари амудӣ мутавозӣ мекунад.

Фарз кунем, ки мо блокҳои флекс дорем, ки дар як саф дар як қатор ҷойгир шудаанд. Онҳоро дар марказ дар амудӣ мутавозӣ кунем, ба align-items қимати center-ро дода, ва ба унсури дуюм синфи иловагӣ elem-ро диҳем ва барои он мутавозӣ кардани дигарро таъин кунем, масалан, онро ба канори боло фишор диҳем.

Барои ин ба унсури мо бо синфи elem хосияти aling-self-ро ба қимати 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;
}

Результат: