Justify self: justify-self — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

justify-self ⚡️ HTML и CSS с примерами кода

Свойство justify-self устанавливает способ выравнивания элемента внутри его контейнера вдоль inline оси.

Демо

Flexbox и выравнивание
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • order
  • justify-content
  • align-content
  • place-content
  • justify-items
  • align-items
  • place-items
  • justify-self
  • align-self
  • place-self
  • row-gap
  • column-gap
  • gap

Синтаксис

/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;
/* Positional alignment */
justify-self: center; /* Pack item around the center */
justify-self: start; /* Pack item from the start */
justify-self: end; /* Pack item from the end */
justify-self: flex-start; /* Pack flex item from the start */
justify-self: flex-end; /* Pack flex item from the end */
justify-self: self-start;
justify-self: self-end;
justify-self: left; /* Pack item from the left */
justify-self: right; /* Pack item from the right */
/* Baseline alignment */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;
/* Overflow alignment (for positional alignment only) */
justify-self: safe center;
justify-self: unsafe center;
/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: unset;

Значения

Значение по-умолчанию: auto

start
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
end
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
flex-start
Флексы прижаты к началу строки.
flex-end
Флексы прижаты к концу строки.
center
Флексы прижимаются по центру строки.
left
Элементы упакованы вплотную друг к другу к левому краю контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start.
right
Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start.

baseline, first baseline, last baseline Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.

Обратно-совместимое выравнивание для first baseline — start, а для last baseline — end.

space-between
Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера.
space-around
Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

space-evenly Элементы равномерно распределены внутри контейнера выравнивания вдоль главной оси. Интервал между каждой парой смежных элементов, краем основного начала и первым элементом, краем основного конца и последним элементом абсолютно одинаков.

stretch Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента авторазмера увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, накладываемые

max-height / max-width (или эквивалентными функциями), так что объединенный размер точно заполняет контейнер выравнивания вдоль главной оси.

safe Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start.

unsafe Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.

Применяется к грид-элементам

Спецификации

  • CSS Box Alignment Module Level 3

Поддержка браузерами

  • Chrome 57+
  • Edge 16+
  • Firefox 45+
  • Safari 10.1

См. также

  • Свойство justify-items

Свойство CSS justify-self задает способ выравнивания бокса внутри его контейнера выравнивания по соответствующей оси.

Свойство CSS justify-self устанавливает способ выравнивания прямоугольника внутри контейнера выравнивания по соответствующей оси.

Try it

Эффект этого свойства зависит от режима компоновки,в котором мы находимся:

  • В схемах на уровне блоков выравнивает элемент внутри содержащего его блока по оси линии.
  • Для абсолютно позиционированных элементов он выравнивает элемент внутри своего содержащего блока по линейной оси,учитывая значения смещения верхнего,левого,нижнего и правого.
  • В макетах ячеек таблицы это свойство игнорируется . Подробнее о выравнивании в блоке, абсолютном позиционировании и компоновке таблицы .
  • В макетах flexbox это свойство игнорируется . Подробнее о выравнивании во Flexbox читайте .
  • В макетах сетки он выравнивает элемент внутри своей области сетки по встроенной оси. Узнайте больше о выравнивании в макетах сетки .

Syntax

/ * Основные ключевые слова * /
justify-self: auto;
justify-self: normal;
justify-self: stretch;
/ * Позиционное выравнивание * /
justify-self: center;     / * Упакуем предмет по центру * /
justify-self: start;      / * Упаковать элемент с самого начала * /
justify-self: end;        / * Упакуем предмет с конца * /
justify-self: flex-start; / * Эквивалентно start. Обратите внимание, что justify-self игнорируется в макетах Flexbox.
  * /
justify-self: flex-end;   / * Эквивалентно end. Обратите внимание, что justify-self игнорируется в макетах Flexbox. * /
justify-self: self-start;
justify-self: self-end;
justify-self: left;       / * Упакуем элемент слева * /
justify-self: right;      / * Упакуем элемент справа * /
/ * Базовое выравнивание * /
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;
/ * Выравнивание переполнения (только для позиционного выравнивания) * /
justify-self: safe center;
justify-self: unsafe center;
/ * Глобальные значения * /
justify-self: inherit;
justify-self: initial;
justify-self: revert;
justify-self: revert-layer;
justify-self: unset;

Это свойство может принимать одну из трех различных форм:

  • Основные ключевые слова: одно из значений ключевого слова: normal , auto или stretch .
  • Выравнивание базовой линии: ключевое слово baseline , а также, возможно, одно из first или last .
  • Positional alignment:
    • один из: center , start , end , flex-start , flex-end , self-start , self-end , left или right .
    • Плюс опционально safe или unsafe .

Values

auto

Используемое значение — это значение свойства justify-items родительского блока, если только у блока нет родительского элемента или он абсолютно позиционирован, в этих случаях

auto представляет собой normal .

normal

Эффект этого ключевого слова зависит от того,в каком режиме компоновки мы находимся:

  • В макетах уровня блока ключевое слово является синонимом start .
  • В абсолютно позиционированных макетах ключевое слово ведет себя как start в замененных абсолютно позиционированных блоках и как stretch во всех остальных абсолютно позиционированных блоках.
  • В макетах ячеек таблицы это ключевое слово не имеет значения, так как это свойство игнорируется .
  • В макетах flexbox это ключевое слово не имеет смысла, так как это свойство игнорируется.
  • В макетах сетки это ключевое слово ведет к поведению, аналогичному stretch
    , за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как start .
start

Изделие упаковывается заподлицо друг с другом по направлению к начальному краю контейнера для выравнивания по соответствующей оси.

end

Изделие упаковывается заподлицо друг с другом по направлению к торцевому краю контейнера для выравнивания по соответствующей оси.

flex-start

Для элементов, которые не являются потомками гибкого контейнера, это значение рассматривается как start .

flex-end

Для элементов, которые не являются потомками гибкого контейнера, это значение обрабатывается как end .

self-start

Изделие упаковывается заподлицо с краем контейнера выравнивания с начальной стороны изделия,по соответствующей оси.

self-end

Изделие упаковывается заподлицо с краем контейнера для выравнивания торцевой стороны изделия,по соответствующей оси.

center

Элементы упаковываются заподлицо друг с другом по центру контейнера выравнивания.

left

Предметы упакованы вплотную друг к другу к левому краю выравнивающего контейнера. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .

right

Предметы упаковываются заподлицо друг с другом к правому краю выравнивающего контейнера по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .

baseline, first baseline, last baseline

Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего набора базовых линий блока с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех блоков в его группе совместного использования базовой линии.

Резервное выравнивание для first baseline — это start , для last baseline — это end .

stretch

Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента с auto размерами увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, накладываемые max-height / max-width (или эквивалентной функциональностью). ), так что объединенный размер точно заполняет контейнер выравнивания.

safe

Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start .

unsafe

Независимо от относительных размеров элемента и контейнера выравнивания,заданное значение выравнивания соблюдается.

Formal definition

Initial valueauto
Applies toкоробки на уровне блоков,абсолютно расположенные коробки и элементы сетки
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

justify-self =   auto                                                |  normal                                              |  stretch                                             |  <baseline-position>                                 |  <overflow-position>? [ <self-position> | left | right ]  <baseline-position> =   [ first | last ]?  &&  baseline           <overflow-position> =   unsafe  |  safe    <self-position> =   center      |  start       |  end         |  self-start  |  self-end    |  flex-start  |  flex-end

Examples

Simple demonstration

В следующем примере у нас есть простая сетка 2 x 2. Первоначально контейнеру сетки присваивается значение stretch justify-items — значение по умолчанию, которое заставляет элементы сетки растягиваться по всей ширине их ячеек.

Затем второму, третьему и четвертому элементам сетки присваиваются разные значения justify-self , чтобы показать, как они переопределяют значение justify-items . Эти значения приводят к тому, что элементы сетки охватывают только ширину их содержимого и выравниваются в разных положениях по своим ячейкам.

HTML
<article>
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>
CSS
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}
article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 300px;
  justify-items: stretch;
}
span:nth-child(2) {
  justify-self: start;
}
span:nth-child(3) {
justify-self: center;
}
span:nth-child(4) {
justify-self: end;
}
article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}
article, span {
  padding: 10px;
  border-radius: 7px;
}
article {
  margin: 20px;
}
Result

Specifications

Specification
Модуль выравнивания блоков CSS, уровень 3
# justify-self-property

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
justify-self

57

16

45

10

44

10. 1

57

57

45

43

10.3

6.0

flex_context

57

16

45

No

44

10.1

57

57

45

43

10.3

6.0

grid_context

57

16

45

10

Internet Explorer 10 и 11 имеют свойство -ms-grid-column-align , которое действует аналогично justify-self .

44

10.1

57

57

45

43

10.3

6.0

See also

  • CSS Grid Guide: выравнивание блоков в макетах CSS Grid
  • Выравнивание блоков CSS
  • justify-items недвижимости

CSS

  • justify-content

    Свойство CSS justify-content определяет,как браузер распределяет пространство между и вокруг элементов вдоль главной оси гибкого контейнера,инлайн-сетки Интерактивный

  • justify-items

    Свойство CSS justify-items определяет по умолчанию justify-self для всех боксов,давая им возможность выравнивать каждый по соответствующей оси.

  • justify-tracks

    Экспериментальный:Эта технологияПеред использованием продукции внимательно проверьте таблицу совместимости браузеров.

  • Layout mode

    Режим компоновки CSS,который иногда называют алгоритмом,определяющим положение и размер боксов на основе их взаимодействия со своим родственным предком.

  • 1
  • …
  • 583
  • 584
  • 585
  • 586
  • 587
  • …
  • 857
  • Next

justify-self — CSS: Каскадные таблицы стилей

Свойство CSS justify-self задает способ выравнивания блока внутри его контейнера выравнивания вдоль соответствующей оси.

Действие этого свойства зависит от режима макета, в котором мы находимся:

  • В макетах на уровне блоков оно выравнивает элемент внутри содержащего его блока по встроенной оси.
  • Для элементов с абсолютным позиционированием он выравнивает элемент внутри содержащего его блока по встроенной оси с учетом значений смещения сверху, слева, снизу и справа.
  • В макетах ячеек таблицы это свойство игнорируется . Узнайте больше о выравнивании в блоке, абсолютном позиционировании и макете таблицы.
  • В макетах flexbox это свойство игнорируется . Узнайте больше о выравнивании во Flexbox.
  • В макетах сетки выравнивает элемент внутри своей области сетки по встроенной оси. Узнайте больше о выравнивании в макетах сетки.
 /* Основные ключевые слова */
оправдать себя: авто;
оправдать себя: нормальный;
оправдать себя: растянуть;
/* Позиционное выравнивание */
оправдать себя: центр; /* Упакуем предмет по центру */
оправдать себя: начать; /* Упаковать элемент с самого начала */
оправдать себя: конец; /* Упаковать элемент с конца */
оправдать себя: гибкий старт; /* Эквивалент 'начало'.  Обратите внимание, что justify-self игнорируется в макетах Flexbox. */
оправдать себя: гибкий конец; /* Эквивалентно 'концу'. Обратите внимание, что justify-self игнорируется в макетах Flexbox. */
оправдать себя: самозапуск;
оправдать себя: самоцель;
оправдаться: слева; /* Упаковать элемент слева */
оправдать себя: правильно; /* Упаковать элемент справа */
/* Базовое выравнивание */
оправдать себя: исходный уровень;
оправдать себя: первая базовая линия;
оправдать себя: последний базовый уровень;
/* Выравнивание переполнения (только для позиционного выравнивания) */
оправдать себя: безопасный центр;
оправдать себя: небезопасный центр;
/* Глобальные значения */
оправдать себя: наследовать;
оправдать себя: начальный;
оправдать себя: вернуться;
оправдать себя: вернуть слой;
оправдать себя: не установлено;

Это свойство может принимать одну из трех различных форм:

  • Основные ключевые слова: одно из значений ключевого слова обычный , автоматический или растягиваемый .
  • Выравнивание по базовой линии: ключевое слово baseline плюс, необязательно, одно из first или last .
  • Позиционное выравнивание:
    • один из: центр , начало , конец , флекс-старт , флекс-конец , самозапуск , самозапуск , левый или правый .
    • Plus опционально безопасный или небезопасный .

Значения

авто

Используемое значение является значением свойства justify-items родительского блока, если только блок не имеет родителя или не имеет абсолютного позиционирования, в этих случаях auto представляет normal .

обычный

Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:

  • В макетах на уровне блоков ключевое слово является синонимом start .
  • В абсолютно позиционированных макетах ключевое слово ведет себя как start на заменяет абсолютно позиционированных блоков и как растягивает на все остальные абсолютно позиционированных блоков.
  • В макетах ячеек таблицы это ключевое слово не имеет значения, так как это свойство игнорируется .
  • В макетах flexbox это ключевое слово не имеет значения, так как это свойство игнорируется.
  • В макетах сетки это ключевое слово приводит к поведению, аналогичному stretch , за исключением полей с соотношением сторон или внутренними размерами, где оно ведет себя как start .
начало

Элемент упакован заподлицо друг с другом по направлению к начальному краю контейнера выравнивания по соответствующей оси.

конец

Элемент упаковывается вровень друг с другом по направлению к краю контейнера выравнивания по соответствующей оси.

гибкий пуск

Для элементов, которые не являются дочерними элементами гибкого контейнера, это значение обрабатывается как start .

гибкий конец

Для элементов, которые не являются дочерними элементами гибкого контейнера, это значение обрабатывается как end .

самозапуск

Элемент упаковывается вровень с краем контейнера выравнивания начальной стороны элемента по соответствующей оси.

самоконечный

Товар упаковывается вровень с краем контейнера выравнивания торцевой стороны предмета по соответствующей оси.

центр

Элементы упаковываются вплотную друг к другу по направлению к центру контейнера для выравнивания.

слева

Элементы уложены вплотную друг к другу по направлению к левому краю контейнера для выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .

справа

Элементы укладываются вплотную друг к другу по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как 9.0004 начало .

базовый уровень , первый базовый уровень , последний базовый уровень

Указывает участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего набора базовых линий блока с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех блоков в его группе совместного использования базовых линий. Резервное выравнивание для first baseline равно start , для последний базовый уровень равен концу .

стрейч

Если общий размер элементов меньше размера контейнера выравнивания, размер любых элементов auto увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, налагаемые max-height / max -width (или эквивалентная функциональность), чтобы объединенный размер точно заполнил контейнер выравнивания.

сейф

Если размер элемента выходит за пределы контейнера выравнивания, вместо этого элемент выравнивается, как если бы режим выравнивания был start .

небезопасно

Независимо от относительных размеров элемента и контейнера выравнивания, заданное значение выравнивания учитывается.

Начальное значение авто
Применяется к блочным блокам, блокам с абсолютным позиционированием и элементам сетки
Унаследовано нет
Вычисленное значение как указано 9027 4
Тип анимации дискретный
 оправдать себя = 
 авто | 
 обычный | 
 стрейч | 
 <базовая позиция> | 
 <позиция переполнения>? [ <собственное положение> | слева | справа ] 
 "><базовая позиция> = 
 [ первая | последняя ]? && 
 базовая линия 
 
 "><положение переполнения> = 
 небезопасно | 
 безопасный 
 
 "><собственное положение> = 
 центр | 
 начало | 
 конец | 
 самозапуск | 
 самостоятельный конец | 
 гибкий старт | 
 гибкий конец

Простая демонстрация

В следующем примере у нас есть простая сетка 2 x 2. Первоначально контейнеру сетки присваивается значение justify-items , равное stretch — значение по умолчанию, которое заставляет элементы сетки растягиваться по всей ширине их ячеек.

Затем второму, третьему и четвертому элементам сетки присваиваются разные значения justify-self , чтобы показать, как они переопределяют значение justify-items . Эти значения приводят к тому, что элементы сетки занимают ширину, равную ширине их содержимого, и выравниваются по разным позициям в своих ячейках.

HTML 
 <статья>
  Первый ребенок
  Второй ребенок
  Третий ребенок
  Четвертый ребенок
CSS 
 HTML {
  семейство шрифтов: Helvetica, Arial, без засечек;
  межбуквенный интервал: 1px;
}
статья {
  цвет фона: красный;
  отображение: сетка;
  столбцы сетки-шаблона: 1fr 1fr;
  сетка-авто-строки: 40px;
  зазор сетки: 10px;
  поле: 20 пикселей;
  ширина: 300 пикселей;
  элементы выравнивания: растянуть;
}
диапазон: n-й ребенок (2) {
  оправдать себя: начать;
}
диапазон: n-й ребенок (3) {
  оправдать себя: центр;
}
диапазон: n-й ребенок (4) {
  оправдать себя: конец;
}
диапазон статей {
  цвет фона: черный;
  белый цвет;
  поле: 1px;
  выравнивание текста: по центру;
}
статья,
охватывать {
  отступ: 10 пикселей;
  радиус границы: 7px;
}
Результат
Спецификация
Модуль CSS Box Alignment Level 3
# justify-self-property

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Руководство по сетке CSS: Выравнивание блоков в макетах CSS Grid
  • Выравнивание блока CSS
  • элементов выравнивания свойство

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

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

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Выровнять элемент сетки по правому краю его ячейки сетки:

.красный {
  отображение: сетка;
  оправдать себя: правильно;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство justify-self выравнивает элемент сетки в его ячейке в линейном направлении.

Для страниц на английском языке линейное направление — слева направо, а блочное — вниз.

Чтобы это свойство имело какой-либо эффект выравнивания, элементу сетки необходимо свободное пространство вокруг себя в линейном направлении.

Совет: Чтобы выровнять элемент сетки по блочному направлению вместо линейного, используйте свойства align-self или align-items .

Показать демо ❯

Значение по умолчанию: авто
Унаследовано: нет
Анимация: нет. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект .style.justifySelf=»правильно» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
оправдать себя 57,0 16,0 45,0 10,1 44,0

Синтаксис CSS

justify-self: auto|normal|stretch| позиционное выравнивание | выравнивание по переполнению | базовое выравнивание |начальное|наследовать;

Значения свойств

Значение Описание Играй
авто Значение по умолчанию. Значение свойства justify-self контейнера сетки наследуется. Демонстрация ❯
обычный Зависит от контекста макета, но аналогично «растягиванию» для макета сетки для элементов сетки, когда размер не задан. Если установлен размер, значение свойства ведет себя как «начало». Демонстрация ❯
стрейч Растягивается, чтобы заполнить ячейку сетки, если встроенный размер (ширина) не установлен. Демонстрация ❯
начало Выровнять элементы в начале в линейном направлении Демонстрация ❯
слева Выровнять элементы по левому краю Демонстрация ❯
центр Выровнять элементы по центру Демонстрация ❯
конец Выравнивание элементов в конце в линейном направлении Демонстрация ❯
справа Выровнять элементы по правому краю Демонстрация ❯
выравнивание по переливу
  • ‘safe’ устанавливает выравнивание элемента на ‘start’, если содержимое переполняется
  • ‘unsafe’ сохраняет значение выравнивания независимо от того, переполняется ли содержимое элемента
выравнивание базовой линии Элемент выровнен по базовой линии родителя. Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

justify-self vs. justify-items

Выравнивание установлено на «центр» от контейнера со свойством justify-items и «справа» на самом элементе сетки со свойством justify-self. Преобладает значение свойства «право»:

#контейнер {
  отображение: сетка;
  элементы по выравниванию: по центру;
}

.синий {
  оправдать себя: правильно;
}

Попробуйте сами »

выравнивание по абсолютно позиционированным элементам сетки

Выравнивание установлено на «справа» для абсолютно позиционированных элементов сетки:

#контейнер {
  отображение: сетка;
  положение: относительное;
}

. красный {
  позиция: абсолютная;
  оправдать себя: правильно;
}

Попробуйте сами »

режим письма

Если для свойства режим письма элемента контейнера сетки задано значение vertical-rl, линейное направление будет направлено вниз. В результате начало контейнера перемещается с левой стороны вверх, а конец контейнера перемещается с правой стороны вниз:

#container {
  display: grid;
  режим письма: вертикальный-rl;
}

.blue {
  justify-self: end;
}

Попробуйте сами »

direction

Если для свойства direction элемента контейнера сетки задано значение ‘rtl’, линейное направление будет справа налево. В результате начало контейнера перемещается с левой стороны на правую, а конец контейнера перемещается с правой стороны на левую:

#container {
  display: grid;
  направление: rtl;
}

. blue {
  justify-self: end;
}

Попробуйте сами »

Связанные страницы

Учебное пособие по CSS: сетка CSS

Учебное пособие по CSS: позиционирование CSS

Справочник по CSS: свойство align-content

Справочник по CSS: свойство align-items

Справочник по CSS: свойство align-self

Справочник по CSS : свойство direction

Справочник CSS: свойство grid

Справочник CSS: свойство grid-template-columns

Справочник CSS: свойство position

Справочник CSS: свойство write-mode

❮ Предыдущий Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 7

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *