ცალკეული ელემენტის გასწორება flex მოდელში CSS-ში

შემდეგი თვისებები, რომლებსაც ჩვენ ვისწავლით, აღარ ენიჭება ფლექს-ელემენტების მშობელს, არამედ თავად ელემენტებს. მოდით განვიხილოთ თვისება align-self, რომელიც ალაგებს ცალკეულ ბლოკს განივი ღერძის მიმართ.

დავუშვათ, გვაქვს ფლექს-ბლოკები, განლაგებული რიგში. გავსწოროთ ისინი ვერტიკალურად ცენტრში, მივანიჭოთ align-items მნიშვნელობა center, ხოლო მეორე ელემენტს მივცეთ დამატებითი კლასი elem და მისთვის მივანიჭოთ სხვა გასწორება, მაგალითად, მივამაგროთ ის ზედა კიდეს.

ამისთვის ჩვენს ელემენტს elem კლასით დავუყენოთ თვისება align-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;
}

Результат: