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 հատկությունը,
որը սահմանում է հավասարեցումը հիմնական և լայնակի առանցքների նկատմամբ