align-items касиети

align-items касиети флекс блоктору үчүн элементтерди көндөй ок боюнча, гриддер үчүн тик ок боюнча ровдойт. Ата-эне элементине колдонулат.

Синтаксис

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

Келгиле, гриддин дебаггердеги көрүнүшүн көрөлү:

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

Дагы элементтердин ровдолушун өзгөртөлү, бул жолу тик октун аягы боюнча:

<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 касиети,
флекс блокторунун окторунун багытын аныктайт
justify-content касиети,
негизги ок боюнча ровдолуштү аныктайт
align-items касиети,
көндөй ок боюнча ровдолуштү аныктайт
flex-wrap касиети,
флекс блокторунун көп саптуулугун аныктайт
flex-flow касиети,
flex-direction жана flex-wrap үчүн кыскартылган форма
order касиети,
флекс блокторунун тартибин аныктайт
align-self касиети,
бир блоктун ровдолушун аныктайт
flex-basis касиети,
белгилүү бир флекс блогунун өлчөмүн аныктайт
flex-grow касиети,
флекс блокторунун "ач көздүгүн" аныктайт
flex-shrink касиети,
флекс блокторунун кыскаруучулугун аныктайт
flex касиети,
flex-grow, flex-shrink жана flex-basis үчүн кыскартылган форма