English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство justify-content используется для установки или получения способа выравнивания элементов эластичного контейнера по направлению главной оси (горизонтальному направлению).
В таблице приведены инструкции по использованию и истории версий этого свойства, а также синтаксис использования в скриптах JavaScript.
| Значение по умолчанию: | flex-start |
|---|---|
| Подходит для: | Эластичный контейнер |
| Наследование: | Нет |
| Анимация: | Нет.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| Синтаксис JavaScript: | объект.style.justifyContent="space-around" |
Синтаксис этого свойства такой:
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit
Ниже приведен пример того, как использовать атрибут justify-content.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}Проверьте‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| flex-start | Эластичные элементы расположены в начале строки контейнера. Это значение по умолчанию. |
| flex-end | Эластичные элементы расположены в конце строки. |
| center | Элементы расположены в центре контейнера. |
| space-between | Эластичные элементы равномерно распределены по линии. |
| space-around | Эластичные элементы равномерно распределены, чтобы расстояние между двумя相邻ыми элементами было одинаковым. |
| initial | Установить этот атрибут в его значение по умолчанию. |
| inherit | Если задан, то связанный элемент использует значение свойства justify-content родительского элемента. |
Совместимость браузеров для свойства justify-content, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Пожалуйста, обратитесь к следующим руководствам:CSS шрифты,CSS единицы измерения,CSS псевдоэлементы.
Связанные атрибуты:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.