Hordhac ku saabsan `align-self`

Sifada align-self waxaa loo isticmaalaa in lagu habeeyo booska hal shay oo ku jira flex container. Waxay ka duwan tahay align-items oo saameyn ku yeelata dhammaan carruurta flex-ka, align-self waxay si gaar ah u saameysaa hal shay oo keliya.

Qiimaha ay qaadan karto `align-self`

• auto: Shaygu wuxuu la wareegayaa qiimaha align-items ee waalidka.
• flex-start: Shaygu wuxuu ku dhegganaanayaa bilowga xariiqda (cross-start).
• flex-end: Shaygu wuxuu ku dhegganaanayaa dhammaadka xariiqda (cross-end).
• center: Shaygu wuxuu ku dhegganaanayaa bartamaha xariiqda.
• baseline: Shaygu wuxuu ku dhegganaanayaa saldhigga xariiqda.
• stretch: Shaygu wuu fidsanayaa si uu u buuxiyo xariiqda (haddii aan la cayimin cabbir).

Tusaale Isticmaal

Aan aragno sida loo isticmaali karo align-self si loo xakameeyo booska hal shay oo ku jira flex container:

<div class="container">
  <div class="item">1</div>
  <div class="item special">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  align-items: center; /* Dhammaan waxyaabaha waxay ku dheggan yihiin bartamaha */
  height: 200px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-align: center;
  margin: 5px;
}

.special {
  align-self: flex-start; /* Kaliya shaygan ayaa ku dheggan bilowga */
}

Tusaalahan, shayga leh class-ka special wuxuu ku dheggan yahay bilowga xariiqda (cross-start), halka waxyaabaha kale ay ku dheggan yihiin bartamaha sababtoo ah align-items: center; ee konteenarka.

Goorma la isticmaalaa `align-self`?

align-self waxaa loo isticmaalaa marka aad rabto inaad xakameyso booska hal shay oo keliya oo ku jira flex container, adigoon saameyn ku yeelan booska waxyaabaha kale. Tani waxay faa'iido u leedahay marka aad u baahan tahay inaad sameyso isbeddel ku yimaada qaabka ama booska shay gaar ah.