Align-content касиети

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

Синтаксис

селектор {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Маанилери

Маани	Сүрөттөмө
`flex-start`	Блоктор көлдөө (тик) огунун башталышына жабыштырылган.
`flex-end`	Блоктор көлдөө (тик) огунун аягына жабыштырылган.
`center`	Блоктор көлдөө (тик) огунун борборунда турат.
`space-between`	Блоктор көлдөө (тик) огу боюнча бөлүштүрүлгөн, биринчи элемент огунун башталышына жабыштырылган, ал эми акыркысы - аягына.
`space-around`	Блоктор көлдөө (тик) огу боюнча бөлүштүрүлгөн, биринчи блок менен огунун башталышынын ортосунда, акыркы блок менен огунун аягынын ортосунда дагы оштогон блоктордун ортосундагыдай эле аралык бар. Бирок, алар көрүнгөндөй бирдей эмес: аралыктар кошулат жана эки блоктун ортосундагы аралык блок менен огунун башталышы/аягынын ортосундагыдан эки эсе чоң.

Мисал . flex-start мааниси

Бул мисалда тегиздөө жүргүзүлүүчү ок жогорудон төмөн карай багытталган, башкача айтканда ал көлдөө огу. Алынган натыйжадан көрүнүп тургандай, биздин бардык элементтерибиз анын жогорку бөлүгүнө жабыштырылган:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

Бул мисалда блоктор көлдөө огунун төмөнкү тарабына жабыштырылган, анткени align-content касиети flex-end маанисинде берилген:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Гридде тик огунун башталышы боюнча тегиздөө

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

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

#parent {
	display: grid;
	align-content: 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>

#parent {
	display: grid;
	align-content: 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>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: 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;
}

Ошондой эле караңыз

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