CSS тортунун уячаларынын ичиндеги элементтерди тик огу боюнча тегиздөө

Тордун уячаларынын ичиндеги элементтерди тик огу боюнча тегиздөө үчүн биз эне-элементте белгиленген align-items касиетин колдонобуз. Бул касиеттин ишин браузердин дебаггери аркылуу торду көрүү учурунда көрүүгө болот.

Октун башталышы боюнча

Келгиле, биздин элементтерибизди уячалардын ичинде тик октун башталышы боюнча тегиздейли:

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	
}

Келгиле, биздин торду браузердин дебаггеринде көрөлү:

Практикалык тапшырмалар

Алты элементтен турган, эки тилкеге жайгашкан тор түзүңүз. Уячалардын ичиндеги элементтерди тик октун башталышы боюнча тегиздеңиз.

Эми тордун элементтерин үч тилкеге жайгаштырыңыз жана уячалардын ичиндеги элементтерди тордун тик октун борбору боюнча тегиздөөнү коюңуз.

Мурунку тапшырманы өзгөртүңүз, ал элементтердин тегиздөөсү тик октун аягы боюнча ишке ашышын.