align-self касиети

align-self касиети жеке алынган flex-блок үчүн кесилме огу боюнча жана гриддеги жеке элемент үчүн тик огу боюнча ылайыктаманы аныктайт. Негизи бул касиет align-items касиетинин маанисин алып, аны бир блокко колдонуу.

Синтаксис

тандоочу {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Маанилер

Маани	Сүрөттөмө
`flex-start`	Блок кесилме огунун башталышына жабыштырылган.
`flex-end`	Блок кесилме огунун аягына жабыштырылган.
`center`	Блок кесилме огунун борборунда турат.
`baseline`	Блок өзүнүн негизги сызыгы боюнча ылайыкталат. Негизги сызык - бул символдордун астыңкы четинен өткөн, асмаларды эсепке албаган, мисалы, `'p'`, `'q'`, `'y'`, `'g'` сыяктуу тамгалардын жыйылымы.
`stretch`	Блок созулуп, кесилме огу боюнча бардык жеткиликтүү орунду ээлейт, бирок аларга `min-width` жана `max-width` коюлган болсо, алар эске алынат. Эгерде элементке туурасы жана бийиктиги белгиленсе - `stretch` мааниси эске алынбай калат.
`auto`	Блок `align-items` касиетинде коюлгандай ылайыкталат.

Демейки маани: auto.

Мисал . Stretch мааниси

Бул мисалда бардык блокторго flex-start мааниси коюлган (align-items касиети), ал эми үчүнчү блокко - align-self касиетинин stretch мааниси:

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

#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;
}

Мисал . Flex-end мааниси

Бул мисалда бардык блоктор үчүн align-items касиетине flex-start мааниси коюлган, ал эми үчүнчү блокко - align-self касиетинин flex-end мааниси:

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

#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;
}

Мисал . Гридде тик огунун башталышы боюнча ылайыктоо

Биринчи элемент үчүн тик огунун башталышы боюнча ылайыктаманы коёлу:

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

#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;
}

Мисал . Гридде тик огунун борбору боюнча ылайыктоо

Биринчи элемент үчүн тик огунун борбору боюнча ылайыктаманы коёлу:

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

#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;
}

Мисал . Гридде тик огунун аягы боюнча ылайыктоо

Гриддеги биринчи элемент үчүн тик огунун аягы боюнча ылайыктаманы коёлу:

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

#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;
}

Дагы караңыз

flex-direction касиети,
бул flex блоктордун окторунун багытын аныктайт
justify-content касиети,
бул негизги огу боюнча ылайыктаманы аныктайт
align-items касиети,
бул кесилме огу боюнча ылайыктаманы аныктайт
flex-wrap касиети,
бул flex блоктордун көп саптуулугун аныктайт
flex-flow касиети,
flex-direction жана flex-wrap үчүн кыскартуу
order касиети,
бул flex блоктордун иретин аныктайт
flex-basis касиети,
бул анык flex блоктун өлчөмүн аныктайт
flex-grow касиети,
бул flex блоктордун ачкөздүгүн аныктайт
flex-shrink касиети,
бул flex блоктордун кысылуу мүмкүнчүлүгүн аныктайт
flex касиети,
flex-grow, flex-shrink жана flex-basis үчүн кыскартуу