Свойство 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;
}

Результат:

Вижте също