Savybė justify-content

Savybė justify-content nustato elementų lygiavimą išilgai pagrindinės ašies flex blokams ir išilgai horizontaliąsias ašies gardų (grid) atveju. Taikoma tėviniam elementui.

Sintaksė

selektorius {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Reikšmės

Reikšmė	Aprašas
`flex-start`	Blokai prigludę prie pagrindinės (horizontaliąsios) ašies pradžios.
`flex-end`	Blokai prigludę prie pagrindinės (horizontaliąsios) ašies pabaigos.
`center`	Blokai išdėstyti pagrindinės (horizontaliąsios) ašies centre.
`space-between`	Blokai paskirstyti išilgai pagrindinės (horizontaliąsios) ašies, o pirmasis elementas prigludęs prie ašies pradžios, o paskutinis - prie ašies pabaigos.
`space-around`	Blokai paskirstyti išilgai pagrindinės (horizontaliąsios) ašies, o tarpas tarp pirmojo bloko ir ašies pradžios, paskutinio bloko ir ašies pabaigos yra toks pat, kaip ir tarp likusių blokų. Tačiau, jie nėra lygūs, kaip gali atrodyti: tarpai sumuojasi ir tarp dviejų blokų atstumas yra dvigubai didesnis nei tarp bloko ir ašies pradžios/pabaigos.

Numatytoji reikšmė: flex-start.

Pavyzdys . Reikšmė flex-start

Dabar ašies kryptis yra iš kairės į dešinę (tai nustato flex-direction: row), o blokai prigludę prie kairiojo krašto:

<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;
}

Pavyzdys . Reikšmė flex-end

Šiame pavyzdyje ašis taip pat nukreipta iš kairės į dešinę, bet blokai prigludę prie dešiniojo krašto, kadangi nustatyta justify-content reikšmė 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;
}

Pavyzdys . Reikšmė center

Dabar blokai bus išdėstyti centre, nepriklausomai nuo pagrindinės ašies krypties:

<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;
}

Pavyzdys . Reikšmė space-between

Blokai paskirstyti išilgai pagrindinės ašies, o pirmasis elementas prigludęs prie ašies pradžios, o paskutinis - prie ašies pabaigos:

<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;
}

Pavyzdys . Reikšmė space-around

Blokai paskirstyti išilgai pagrindinės ašies, o tarpas tarp pirmojo bloko ir ašies pradžios, paskutinio bloko ir ašies pabaigos yra toks pat, kaip ir tarp likusių blokų. Tačiau, tarpai sumuojasi ir tarp dviejų blokų atstumas yra dvigubai didesnis, nei tarp bloko ir ašies pradžios/pabaigos:

<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;
}

Pavyzdys . Reikšmė center. Ašis žemyn

Pakeiskime pagrindinės ašies kryptį, nustatydami flex-direction reikšmę 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;
}

Pavyzdys . Reikšmė space-between. Ašis žemyn

Dabar blokai bus tolygiai paskirstyti vertikaliai:

<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;
}

Pavyzdys . Lygiavimas horizontaliąsios ašies (eilučių) pradžioje garde (grid)

Nustatykime mūsų elementų lygiavimą horizontaliąsios ašies pradžioje:

<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;
}

Pavyzdys . Lygiavimas horizontaliąsios ašies centre garde (grid)

Dabar nustatykime mūsų elementų lygiavimą horizontaliąsios ašies centre:

<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;
}

Pavyzdys . Lygiavimas horizontaliąsios ašies pabaigoje garde (grid)

Nustatykime mūsų elementų lygiavimą horizontaliąsios ašies pabaigoje:

<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;
}

Taip pat žiūrėkite

savybė flex-direction,
kuri nustato flex blokų ašių kryptį
savybė align-items,
kuri nustato lygiavimą skersinėje ašyje
savybė flex-wrap,
kuri nustato flex blokų daugiaeiliškumą
savybė flex-flow,
santrumpa flex-direction ir flex-wrap savybėms
savybė order,
kuri nustato flex blokų tvarką
savybė align-self,
kuri nustato vieno bloko lygiavimą
savybė flex-basis,
kuri nustato konkretaus flex bloko dydį
savybė flex-grow,
kuri nustato flex blokų "godumą"
savybė flex-shrink,
kuri nustato flex blokų susispaudimą
savybė flex,
santrumpa flex-grow, flex-shrink ir flex-basis savybėms