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 արժեք + էլեմենտի չափսեր

Այժմ էլեմենտների համար սահմանված է լայնություն և բարձրություն, ուստի stretch արժեքը align-items հատկության համար կանտեսվի:

<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-ի համար