Уласцівасць justify-content

Уласцівасць justify-content задае выраўноўванне элементаў уздоўж галоўнай восі для flex-блокаў і па гарызантальнай восі для грідаў. Ужываецца да бацькоўскага элемента.

Сінтаксіс

cssселектар {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Значэнні

Значэнне па змаўчанні: flex-start.

Прыклад . Значэнне flex-start

Зараз вось накіравана злева направа (гэта робіць flex-direction: row), а блокі прыціснуты да левага боку:

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

css#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:

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

css#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

Зараз блокі будуць стаяць па цэнтры незалежна ад напрамку галоўнай восі:

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

css#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

Блокі размеркаваны ўздоўж галоўнай восі, пры гэтым першы элемент прыціснуты да пачатку восі, а апошні - да канца:

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

css#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

Блокі размеркаваны ўздоўж галоўнай восі, пры гэтым паміж першым блокам і пачаткам восі, апошнім блокам і канцом восі такі ж прамежак, як і паміж астатнімі блокамі. Аднак, прамежкі сумуюцца і паміж двума блокамі адлегласць у два разы большая, чым паміж блокам і пачаткам/канцом восі:

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

css#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:

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

css#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. Вось уніз

Зараз блокі размеркуюцца раўнамерна па вертыкалі:

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

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

Результат:

Прыклад . Выраўноўванне па пачатку гарызантальнай восі (радкі) у грідзе

Давайце ўсталюем выраўноўванне для нашых элементаў па пачатку гарызантальнай восі:

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

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

Результат:

Прыклад . Выраўноўванне па цэнтры гарызантальнай восі ў грідзе

А цяпер усталюем выраўноўванне для нашых элементаў па цэнтры гарызантальнай восі:

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

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

Результат:

Прыклад . Выраўноўванне па канцы гарызантальнай восі ў грідзе

Давайце ўсталюем выраўноўванне для нашых элементаў па канцы гарызантальнай восі:

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

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

Результат:

Глядзіце таксама