Align-self xassəsi

align-self xassəsi ayrı-ayrı flex-bloku üçün çarpaz ox üzrə və grid-də ayrı-ayrı element üçün şaquli ox üzrə düzlənməni təyin edir. Əslində bu xassə align-items xassəsini təmsil edir, lakin konkret blok üçün.

Sintaksis

cssselektor {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Dəyərlər

Dəyər	Təsvir
`flex-start`	Blok çarpaz oxun başlanğıcına sıxılır.
`flex-end`	Blok çarpaz oxun sonuna sıxılır.
`center`	Blok çarpaz oxun mərkəzində yerləşir.
`baseline`	Blok öz əsas xətti üzrə düzlənir. Baz xətti - sallanan hissələri nəzərə almadan, məsələn, `'p'`, `'q'`, `'y'`, `'g'` hərflərində olduğu kimi, simvolların aşağı kənarı boyunca keçən xəyali xəttdir.
`stretch`	Blok çarpaz ox boyunca bütün mövcud yeri tutaraq uzanır, `min-width` və `max-width` təyin olunubsa, onlar yenə də nəzərə alınır. Əgər element üçün en və hündürlük təyin olunubsa - `stretch` laq ediləcək.
`auto`	Blok `align-items` xassəsində təyin olunduğu kimi düzlənəcək.

Susmaya görə dəyər: auto.

Nümunə . Stretch dəyəri

Bu nümunədə bütün bloklara flex-start dəyəri təyin edilib (align-items xassəsi), üçüncü bloka isə - align-self stretch dəyərində:

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

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
  height: 100px;
}
#parent > div {
  min-width: 100px;
  border: 1px solid #696989;
}
#elem {
  align-self: stretch;
}

Результат:

Nümunə . Flex-end dəyəri

Bu nümunədə bütün bloklar üçün align-items xassəsinə flex-start dəyəri təyin edilib, üçüncü bloka isə - align-self flex-end dəyərində:

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

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
  height: 100px;
}
#parent > div {
  min-width: 100px;
  border: 1px solid #696989;
}
#elem {
  align-self: flex-end;
}

Результат:

Nümunə . Grid-də şaquli oxun başlanğıcı üzrə düzlənmə

Gəlin birinci element üçün şaquli oxun başlanğıcı üzrə düzlənmə təyin edək:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: start;
}

Результат:

Nümunə . Grid-də şaquli oxun mərkəzi üzrə düzlənmə

Gəlin birinci elementin şaquli oxun mərkəzi üzrə düzlənməsini təyin edək:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: center;
}

Результат:

Nümunə . Grid-də şaquli oxun sonu üzrə düzlənmə

Gəlin grid-də birinci elementimizin şaquli oxun sonu üzrə düzlənməsini təyin edək:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: end;
}

Результат:

Həmçinin bax

flex-direction xassəsi,
bu flex bloklarının oxlarının istiqamətini təyin edir
justify-content xassəsi,
bu əsas ox üzrə düzlənməni təyin edir
align-items xassəsi,
bu çarpaz ox üzrə düzlənməni təyin edir
flex-wrap xassəsi,
bu flex bloklarının çoxsətirliliyini təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaltma
order xassəsi,
bu flex bloklarının sırasını təyin edir
flex-basis xassəsi,
bu konkret flex blokunun ölçüsünü təyin edir
flex-grow xassəsi,
bu flex bloklarının acgözlüyünü təyin edir
flex-shrink xassəsi,
bu flex bloklarının sıxılabilməsini təyin edir
flex xassəsi,
flex-grow, flex-shrink və flex-basis üçün qısaltma