Содержание

CSS justify content

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Совместите элементы Flex в центре контейнера:

div {
    display: flex;
    justify-content: center;
}

Подробнее примеры ниже.

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

Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (горизонтально).

Совет: Используйте свойство Выравнивание-элементы для выравнивания элементов по вертикали.

Значение по умолчанию:flex-start
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.justifyContent=»space-between»

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

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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Свойство
justify-content29.0
21.0 -webkit-		11.028.0
18.0 -moz-		9.0
6.1 -webkit-		17.0

Синтаксис CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

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

ЗначениеОписание
flex-startЗначение по умолчанию. Элементы разположены в начале контейнера
flex-endЭлементы разположены в конце контейнера
centerЭлементы разположены в центре контейнера
space-betweenЭлементы располагаются в промежутке между линиями
space-aroundЭлементы располагаются с пробелами до, между и после линий
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

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

Пример

Выравнивание элементов Flex в начале контейнера (по умолчанию):

div {
    display: flex;
    justify-content: flex-start;
}

Пример

Совместите элементы Flex в конце контейнера:

div {
    display: flex;
    justify-content: flex-end;
}

Пример

Отображение элементов Flex с интервалом между линиями:

div {
    display: flex;
    justify-content: space-between;
}

Пример

Отображение элементов Flex с пробелами до, между и после строк:

div {
    display: flex;
    justify-content: space-around;
}

Похожие страницы

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

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

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

HTML DOM Справочник: justifyContent Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.

ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство justify-content — выравнивание по главной оси

Свойство justify-content задает выравнивание элементов вдоль главной оси. Применяется к родительскому элементу для flex блоков.

Синтаксис

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

Значения

ЗначениеОписание
flex-startБлоки прижаты к началу главной оси.
flex-endБлоки прижаты к концу главной оси.
centerБлоки стоят по центру главной оси.
space-between Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу.
space-around Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками.
Однако, они не равны, как могло бы показаться: промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси.

Значение по умолчанию: flex-start.

Пример . Значение flex-start

Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#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:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#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

Сейчас блоки будут стоять по центру независимо от направления главной оси:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#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

Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#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

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

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#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:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#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. Ось вниз

Сейчас блоки распределятся равномерно по вертикали:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

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

:

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

  • свойство flex-direction,
    которое задает направление осей flex блоков
  • свойство justify-content,
    которое задает выравнивание по главной оси
  • свойство align-items,
    которое задает выравнивание по поперечной оси
  • свойство flex-wrap,
    которое многострочность flex блоков
  • свойство flex-flow,
    сокращение для flex-direction и flex-wrap
  • свойство order,
    которое задает порядок flex блоков
  • свойство align-self,
    которое задает выравнивание одного блока
  • свойство flex-basis,
    которое задает размер конкретного flex блока
  • свойство flex-grow,
    которое задает жадность flex блоков
  • свойство flex-shrink,
    которое задает сжимаемость flex блоков
  • свойство flex,
    сокращение для flex-grow, flex-shrink и flex-basis

выравнивание контента | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство justify-content является подсвойством модуля Flexible Box Layout.

Определяет выравнивание по главной оси. Это помогает распределять дополнительное свободное пространство, когда либо все гибкие элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Он также осуществляет некоторый контроль над выравниванием элементов, когда они выходят за пределы строки.

Свойство justify-content принимает пять различных значений:

  • flex-start ( по умолчанию ): элементы упаковываются по направлению к начальной линии
  • flex-end : предметы упакованы ближе к конечной строке
  • центр : элементы располагаются по центру линии
  • пробел между : элементы равномерно распределяются по линии; первый элемент находится в начальной строке, последний элемент в конечной строке
  • пробел-вокруг : элементы равномерно распределены в строке с равным пространством вокруг них
  • пространственно-равномерно : элементы распределены таким образом, что расстояние между любыми двумя соседними элементами выравнивания, перед первым элементом выравнивания и после последнего элемента выравнивания равно же

Следующий рисунок помогает понять, что на самом деле делает свойство justify-content :

Синтаксис 

 justify-content: flex-start | гибкий конец | центр | пространство между | пространство вокруг | пространственно-равномерно
. flex-элемент {
  выравнивание содержимого: по центру;
}

Demo

Следующая демонстрация показывает, как ведут себя flex-элементы в зависимости от значения justify-content :

  • Красный список установлен на flex-start
  • Желтый установлен на flex-end 9 0006
  • Синий установлен на центр
  • Зеленый установлен на пробел-между
  • Розовый установлен на пробел-вокруг
  • Светло-зеленый настроен на пробел-равномерно 900 20

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

Рабочий стол
901 00
Chrome Firefox IE Edge Safari
21* 28 11 12 6.1*

Мобильный телефон/планшет
90 135 113
Android Chrome Android Firefox Android iOS Safari
113 4. 4 7.0-7.1*

Браузер Blackberry 10+ поддерживает новый синтаксис.

В нашем последнем обновлении от декабря 2018 г. justify-content: space-evenly; получает поддержку. На него есть рабочая спецификация проекта.

Рабочий стол
Chrome Firefox IE Edge Safari
60 52 № 79 11

Мобильный телефон/планшет
Android Chrome Android Firefox Android iOS Safari
113 113 113 11.0-11.2

Для получения дополнительной информации о том, как смешивать синтаксис для получения наилучшей поддержки браузера, обратитесь к нашей статье «Использование Flexbox».

Дополнительная информация

  • Модуль CSS Flexible Box Layout Уровень 1
  • Как использовать сетку CSS для выравнивания содержимого и элементов
  • Полное руководство по Flexbox 30 Статья на 5 апреля 2018 г.

    Быстрый способ запомнить разницу между `justify-content` и `align-items`

    Создание расписания конференции с помощью CSS Grid

    Центрирование: самый новый и самый крутой способ против самого старого и самого крутого способа

    Управление макетом на многонаправленном веб-сайте

    Время веселья с элементами сетки размеров

    Пожалуйста, дайте мне немного места

    выравнивание содержимого

    .element { align-content: space-around; }

    выравнивание содержимого flexbox

    выравнивание элементов

    .element { align-items: flex-start; }

    выровнять себя

    .box { align-self: flex-end; }

    отображать

    .element { display: inline-block; }

    дисплей

    flex-направление

    .element { flex-direction: column-reverse; }

    гибкий поток

    .element { flex-flow: перенос строк; }

    гибкая упаковка

    .example { flex-wrap: wrap; }

    выравнивание-элементы

    .element { выравнивание элементов: центр; }

    оправдываться

    .element { justify-self: stretch; }

    место-контент

    место-предметы

    .element { элементы места: центр; }

    место для себя

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

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


    Пример

    Выровняйте гибкие элементы по центру контейнера:

    div {
      дисплей: гибкий;
      выравнивание по ширине: по центру;
    }

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

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

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

    Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (по горизонтали).

    Совет: Используйте свойство align-items для выравнивания элементов по вертикали.

    Примечание: выравнивание содержимого 9Свойство 0006 также можно использовать в контейнере сетки для выравнивания элементов сетки в линейном направлении. Для страниц на английском языке линейное направление — слева направо, а блочное направление — вниз.

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

    Значение по умолчанию: гибкий старт
    Унаследовано: нет
    Анимация: нет. Читать о анимированном
    Версия: УС3
    Синтаксис JavaScript: объект .style.justifyContent="space-between" Попробуй

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

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

    Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

    Собственность
    выравнивание содержимого 29,0
    21,0 -вебкит-    		 11,0 28,0
    18,0 -мунц-    		 9.0
    6.1 -вебкит-    		 17,0

    Синтаксис CSS

    justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

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

    Значение Описание Играй
    гибкий пуск Значение по умолчанию. Элементы располагаются в начале контейнера Демонстрация ❯
    гибкий конец Предметы располагаются в конце контейнера Демонстрация ❯
    центр Предметы расположены в центре контейнера Демонстрация ❯
    пробел между Элементы будут иметь пробел между ними Демонстрация ❯
    пространство вокруг Элементы будут иметь пробел до, между и после них Демонстрация ❯
    равномерно Предметы будут иметь одинаковое пространство вокруг них Демонстрация ❯
    начальный Устанавливает для этого свойства значение по умолчанию. Читать о инициал
    унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

    Дополнительные примеры

    Пример

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

    div {
      дисплей: гибкий;
      justify-content: flex-start;
    }

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

    Пример

    Выровняйте гибкие элементы в конце контейнера:

    div {
      дисплей: гибкий;
      выравнивание-контента: flex-end;
    }

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

    Пример

    Отображение гибких элементов с пробелами между строками:

    div {
    дисплей: гибкий;
      выравнивание содержимого: пробел;
    }

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

    Пример

    Отображение гибких элементов с пробелами до, между и после строк:

    div {
    дисплей: гибкий;
    выравнивание содержимого: пространство вокруг;
    }

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

    Пример с сеткой

    Показать элементы сетки до конца:

    #container {
     отображение: сетка;
     выравнивание-контента: конец;
    }

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

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

    Учебник CSS: CSS flexbox

    Учебник CSS: CSS grid

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

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

    Ссылка CSS: свойство align-self

    Ссылка HTML DOM: свойство justifyContent

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


    ВЫБОР ЦВЕТА

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

    Лучшие ссылки
    HTML Reference
    CSS Reference
    JavaScript Reference
    SQL Reference
    Python Reference
    W3.CSS Reference
    Bootstrap Reference
    PHP Reference
    HTML Colors
    Java Reference
    Angular Reference
    jQuery Reference

    900 85 лучших примеров Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery

    ФОРУМ | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

    No related posts.