WebDev.wiki > CSS > CSS vlastnosti a hodnoty > justify-content

justify-content

Definice a použití

Vlastnost justify-content vám pomůže zarovat vaše flexibilní prvky podle hlavní osy. Vlastnost má efekt pouze na elementy, které jsou dceřinnými elementy elementu s display nastaveným na flex nebo inline-flex.

Hodnoty vstupů	Popis
flex-start	Zarovná flexibilní elementy na začátek ve směru čtení textu (defaultní hodnota)
center	Zarovná flexibilní elementy na střed
flex-end	Zarovná flexibilní elementy na konec ve směru čtení textu
space-between	Flexibilní elementy se zarovnají s mezerami mezi sebou
space-around	Flexibilní elementy se zarovnají s mezerami okolo sebe
initial	Nastaví hodnotu na defaultní
inherit	Dědí hodnotu od mateřského elementu

Ukázka:

CSS

/* CSS pro lepší čitelnost ukázky */
div div {
	width: 10%;
	font-size: 150%;
	border: 1px solid #FF0000;
	text-align: center;
	border-sizing: border-box;
}

/* Dceřinné flexibilní elementy se zarovnají zleva ve směru čtení textu */
#flex-flex-start {
	display: flex;
	justify-content: flex-start;
}

/* Dceřinné flexibilní elementy se zarovnají zprava ve směru čtení textu */
#flex-flex-end {
	display: flex;
	justify-content: flex-end;
}

/* Dceřinné flexibilní elementy se zarovnají na střed */
#flex-center {
	display: flex;
	justify-content: center;
}

/* Dceřinné flexibilní elementy se zarovnají s mezerami mezi sebou */
#flex-space-between {
	display: flex;
	justify-content: space-between;
}

/* Dceřinné flexibilní elementy se zarovnají s mezerami okolo sebe */
#flex-space-around {
	display: flex;
	justify-content: space-around;
}

/* Dceřinné flexibilní elementy se zarovnají zleva ve směru čtení textu (směr čtení textu je nastaven z prava do leva) */
#flex-flex-start-rtl {
	display: flex;
	justify-content: flex-start;
	direction: rtl;
}

Použité vlastnosti: width, font-size, border, text-align, display, justify-content, direction

HTML

Dceřinné flexibilní elementy se zarovnají zleva ve směru čtení textu:
<div id="flex-flex-start">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají zprava ve směru čtení textu:
<div id="flex-flex-end">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají na střed:
<div id="flex-center">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají s mezerami mezi sebou:
<div id="flex-space-between">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají s mezerami okolo sebe:
<div id="flex-space-around">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají zleva ve směru čtení textu (směr čtení textu je nastaven z prava do leva):
<div id="flex-flex-start-rtl">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

Použité tagy: <div>

Výsledek:

Dceřinné flexibilní elementy se zarovnají zleva ve směru čtení textu:

Dceřinné flexibilní elementy se zarovnají zprava ve směru čtení textu:

Dceřinné flexibilní elementy se zarovnají na střed:

Dceřinné flexibilní elementy se zarovnají s mezerami mezi sebou:

Dceřinné flexibilní elementy se zarovnají s mezerami okolo sebe:

Dceřinné flexibilní elementy se zarovnají zleva ve směru čtení textu (směr čtení textu je nastaven z prava do leva):

Podpora webových prohlížečů

Firefoxversion: 28

Internet Explorerversion: 11

Google Chromeversion: 29

Safariversion: 9

Operaversion: 17