# Свойство justify-self

Свойство `justify-self` задает выравнивание отдельного элемента в гриде по горизонтальной оси. Свойство применяется в том элементе, который мы хотим выравнить.

## Синтаксис

`элемент { justify-self: start | center | end; }`

## Значения

Значение | Описание
--- | ---
`flex-start` | Элемент прижат к началу горизонтальной оси.
`flex-end` | Элемент прижат к концу горизонтальной оси.
`center` | Элемент выровнен по центру горизонтальной оси.

## Пример . Выравнивание по началу горизонтальной оси

Давайте установим выравнивание для нашего первого элемента по началу горизонтальной оси:

`<div id="parent"> <div id="elem1">1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; 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; } #elem1 { justify-self: start; }`

:

## Пример . Выравнивание по центру горизонтальной оси

Давайте установим выравнивание первого элемента по центру горизонтальной оси:

`<div id="parent"> <div id="elem1">1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; 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; } #elem1 { justify-self: center; }`

:

## Пример . Выравнивание по концу горизонтальной оси

Давайте установим выравнивание для первого элемента по концу горизонтальной оси:

`<div id="parent"> <div id="elem1">1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; 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; } #elem1 { justify-self: end; }`

:

## Смотрите также

- свойство `place-self`,
  которое задает выравнивание отдельного элемента в гриде
- свойство `align-self`,
  которое задает выравнивание одного блока

← →
↑
en ru