align-items қасиеті

align-items қасиеті flex блоктар үшін элементтердің көлденең ось бойынша, ал grid үшін тік ось бойынша туралауын белгілейді. Аталық элементке қолданылады.

Синтаксис

селектор {
	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;
}

Мысал . Grid ішінде тік осьтің басы бойынша туралау

Жасушалар ішіндегі элементтерді тік осьтің басы бойынша туралайық:

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

Енді браузердің жөндеу құралында grid-ті қарастырайық:

Мысал . Grid ішінде тік осьтің ортасы бойынша туралау

Енді жасушалардағы элементтерді тік осьтің ортасы бойынша туралайық:

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

Grid-тің жөндеу құралында қалай көрсетілетінін қарастырайық:

Мысал . Grid ішінде тік осьтің соңы бойынша туралау

Элементтердің туралауын қайтадан өзгертейік, бұл жолы тік осьтің соңы бойынша:

<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 {
	
}

Енді grid-тің жөндеу құралы арқылы қалай көрінетінін қарастырайық:

Сондай-ақ қараңыз

flex-direction қасиеті,
ол flex блоктардың осьтерінің бағытын белгілейді
justify-content қасиеті,
ол негізгі ось бойынша туралауды белгілейді
align-items қасиеті,
ол көлденең ось бойынша туралауды белгілейді
flex-wrap қасиеті,
ол flex блоктардың көпжолдылығын белгілейді
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 үшін қысқарту