Align-items хусусияти

align-items хусусияти flex-блоклар учун кўндаланг ўқ бўйича ва гридлар учун тик ўқ бўйича элементларни текислашни белгилайди. Ота-она элементга қўлланилади.

Синтаксис

селектор {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Қийматлар

Қиймат	Тавсиф
`flex-start`	Блоклар кўндаланг (тик) ўқнинг бошига босилган.
`flex-end`	Блоклар кўндаланг (тик) ўқнинг охирига босилган.
`center`	Блоклар кўндаланг (тик) ўқнинг марказида жойлашган.
`baseline`	Элементлар ўзларининг асосий чизиғи бўйича текисланади. Асосий чизиқ - бу `'p'` ва `'y'` каби ирғабурувларни ҳисобга олмаган ҳолда белгиларнинг пастки четлари бўйлаб ўтадиган хаёлкий чизиқдир.
`stretch`	Блоклар кўндаланг ўқ бўйича бутун мавжуд жойни эгаллаб чўзилган, бирок `min-width` ва `max-width` белгиланган бўлса, улар ҳам ҳисобга олинади. Агар элементлар учун эни ва бойи белгиланган бўлса - `stretch` эътиборга олинмайди.

Стандарт қиймат: stretch.

Мисол . Stretch қиймати

Ҳозир асосий ўқ чапдан ўнгга йўналган, кўндаланг ўқ бўйича эса элементлар бутун бойликка чўзилган:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Мисол . Stretch қиймати + элемент ўлчамлари

Ҳозир элементлар учун эни ва бойи белгиланган, шунинг учун align-items хусусияти учун stretch қиймати эътиборга олинмайди:

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

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

Мисол . Flex-start қиймати элемент ўлчамларисиз

Ҳозир элементлар юқорига босилган бўлади:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Мисол . Flex-start қиймати + элемент ўлчамлари

Ҳозир элементлар янада юқорига босилган бўлади, бирок уларнинг белгиланган эни ва бойи бўлади:

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

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

Мисол . Flex-end қиймати + элемент ўлчамлари

Ҳозир элементлар пастга босилган бўлади:

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

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

Мисол . Center қиймати + элемент ўлчамлари

Ҳозир элементлар кўндаланг ўқ (бу ҳолда тик) бўйича марказда жойлашган бўлади:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисол . Center қиймати, турли ўлчамдаги элементлар

Ҳозир элементлар бойлик бўйича турли ўлчамга эга (улар матн билан чўзилмоқда, лекин height ҳам белгилаш мумкин), эни ҳаммасида бир хил, чунки width хусусияти белгиланган:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Мисол . Baseline қиймати, турли ўлчамдаги элементлар

Асосий чизиқ бўйича текислаш шундай кўринади:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Мисол . Гридда тик ўқнинг бошига текислаш

Касалар ичидаги элементларимизни тик ўқнинг бошига текислаймиз:

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

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	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;
}

Энди браузернинг дев-тул кутида гридимизга назар соламиз:

Мисол . Гридда тик ўқнинг марказига текислаш

Энди элементларимизни касалар ичида тик ўқнинг марказига текислаймиз:

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

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	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;
}

Келинг гриднинг дев-тул кутидаги кўринишига назар соламиз:

Мисол . Гридда тик ўқнинг охирига текислаш

elementlarning tekislashini yana o'zgartiramiz, bu safar tik o'qning oxiriga tekislaymiz:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	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 {
	
}

Энди дев-тул кути орқали гридимизнинг кўринишига назар соламиз:

Шунингдек қаранг

flex-direction хусусияти,
бу flex-блоклар ўқларининг йўналишини белгилайди
justify-content хусусияти,
бу асосий ўқ бўйича текислашни белгилайди
align-items хусусияти,
бу кўндаланг ўқ бўйича текислашни белгилайди
flex-wrap хусусияти,
бу flex-блокларнинг кўп қatorliligini белгилайди
flex-flow хусусияти,
flex-direction ва flex-wrap учун қисқартма
order хусусияти,
бу flex-блокларнинг тартибини белгилайди
align-self хусусияти,
бу бир блокнинг текислашини белгилайди
flex-basis хусусияти,
бу белгиланган flex-блокнинг ўлчамини белгилайди
flex-grow хусусияти,
бу flex-блокларнинг ҳарислигини белгилайди
flex-shrink хусусияти,
бу flex-блокларнинг қисқаришини белгилайди
flex хусусияти,
flex-grow, flex-shrink ва flex-basis учун қисқартма