Uitlijning van een individueel element in het flexmodel in CSS

De volgende eigenschappen die we zullen bestuderen, worden niet meer ingesteld op de ouder van de flex-elementen, maar op de elementen zelf. Laten we de eigenschap align-self bekijken, die een individueel blok uitlijnt langs de dwarsas.

Stel we hebben flexblokken die in een rij zijn geplaatst. Laten we ze verticaal gecentreerd uitlijnen, door align-items in te stellen op de waarde center, en geven we het tweede element een extra klas elem en geven we daarvoor een andere uitlijning, bijvoorbeeld, laten we het tegen de bovenkant aan plaatsen.

Hiervoor stellen we voor ons element met de klasse elem de eigenschap align-self in op de waarde 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;
}

Результат: