justify-content հատկությունը

justify-content հատկությունը սահմանում է էլեմենտների դասավորումը հիմնական առանցքի երկայնքով flex բլոկների համար և հորիզոնական առանցքի երկայնքով grid-երի համար: Կիրառվում է ծնող էլեմենտին:

Սինտաքս

ընտրիչ {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Արժեքներ

Արժեք	Նկարագրություն
`flex-start`	Բլոկները սեղմված են հիմնական (հորիզոնական) առանցքի սկզբին:
`flex-end`	Բլոկները սեղմված են հիմնական (հորիզոնական) առանցքի վերջին:
`center`	Բլոկները գտնվում են հիմնական (հորիզոնական) առանցքի կենտրոնում:
`space-between`	Բլոկները բաշխված են հիմնական (հորիզոնական) առանցքի երկայնքով, իսկ առաջին էլեմենտը սեղմված է առանցքի սկզբին, վերջինը՝ վերջին:
`space-around`	Բլոկները բաշխված են հիմնական (հորիզոնական) առանցքի երկայնքով, իսկ առաջին բլոկի և առանցքի սկզբի, վերջին բլոկի և առանցքի վերջի միջև նույն բացը է, ինչ մնացած բլոկների միջև: Սակայն, դրանք հավասար չեն, ինչպես կարող էր թվալ: բացերը գումարվում են, և երկու բլոկների միջև հեռավորությունը երկու անգամ ավելի մեծ է, քան բլոկի և առանցքի սկզբ/վերջ միջև:

Լռելյայն արժեքը՝ flex-start:

Օրինակ : flex-start արժեքը

Այժմ առանցքի ուղղությունը ձախից աջ է (սա կատարում է flex-direction: row), իսկ բլոկները սեղմված են ձախ կողմում:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Օրինակ : flex-end արժեքը

Այս օրինակում առանցքը նույնպես ուղղված է ձախից աջ, բայց բլոկները սեղմված են աջ կողմում, քանի որ justify-content-ը սահմանված է flex-end արժեքով:

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

#parent {
	display: flex;
	justify-content: 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;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Օրինակ : space-between արժեքը

Բլոկները բաշխված են հիմնական առանցքի երկայնքով, իսկ առաջին էլեմենտը սեղմված է առանցքի սկզբին, վերջինը՝ վերջին:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Օրինակ : space-around արժեքը

Բլոկները բաշխված են հիմնական առանցքի երկայնքով, իսկ առաջին բլոկի և առանցքի սկզբի, վերջին բլոկի և առանցքի վերջի միջև նույն բացը է, ինչ մնացած բլոկների միջև: Սակայն, բացերը գումարվում են, և երկու բլոկների միջև հեռավորությունը երկու անգամ ավելի մեծ է, քան բլոկի և առանցքի սկզբ/վերջ միջև:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Օրինակ : center արժեքը: Առանցքը ներքև

Փոխենք հիմնական առանցքի ուղղությունը՝ սահմանելով flex-direction column արժեքով:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Օրինակ : space-between արժեքը: Առանցքը ներքև

Այժմ բլոկները հավասարաչափ կբաշխվեն ուղղահայաց:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	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;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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-ում

Իսկ այժմ սահմանենք մեր էլեմենտների դասավորումը հորիզոնական առանցքի կենտրոնի երկայնքով:

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

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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-ում

Եկեք սահմանենք մեր էլեմենտների դասավորումը հորիզոնական առանցքի վերջի երկայնքով:

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

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 բլոկների առանցքների ուղղությունը
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-ի համար