Свойство justify-content
Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:
#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 :
#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
Сейчас блоки будут стоять по центру независимо от направления главной оси:
#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
Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу:
#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
Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками. Однако, промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси:
#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 :
#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. Ось вниз
Сейчас блоки распределятся равномерно по вертикали:
#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; >
Пример . Выравнивание по началу горизонтальной оси (строки) в гриде
Давайте установим выравнивание для наших элементов по началу горизонтальной оси:
#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; >
Пример . Выравнивание по центру горизонтальной оси в гриде
А теперь установим выравнивание для наших элементов по центру горизонтальной оси:
#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; >
Пример . Выравнивание по концу горизонтальной оси в гриде
Давайте установим выравнивание для наших элементов по концу горизонтальной оси:
#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; >
Смотрите также
- свойство 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
justify-content
Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Краткая информация
| Значение по умолчанию | flex-start |
|---|---|
| Наследуется | Нет |
| Применяется | К флекс-контейнерам |
| Анимируется | Нет |
Синтаксис
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.
Свойство justify-content: space-between | space-around | space-evenly
Помните ли вы режим горизонтального выравнивания «по ширине», когда текст распределялся в блоке равномерно, а края текста прижимались к краям блока? Совсем как в этом абзаце.
У флексбокса есть чем-то похожие значения justify-content , которые равномерно распределяют флекс-элементы вдоль главной оси:
- space-between — расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера отступов нет.
- space-around — расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера есть отступ, равный половине расстояния между соседними элементами.
Сейчас мы добавим третьего кота и поэкспериментируем с этими значениями justify-content .
Вся теория и выполнение задания доступны по подписке
Подписка — это:
После подписки вы получите доступ:
- теория тренажёров без ограничений;
- доступ ко всем платным тренажёрам;
- интересные и сложные вызовы для практики;
- безлимитные проверки испытаний.
Бесплатные материалы:
- Конспект части «Флексбокс. Знакомство»
- Статья «Примеры использования флексбоксов»
- Видео «Кому нужны флексы»
Свойство justify-content, выравнивание вдоль главной оси
Вместо «горизонтального» выравнивания во флексбоксе используется свойство для распределения элементов вдоль главной оси — justify-content . Это свойство задаётся для флекс-контейнера.
Его значением по умолчанию является flex-start . При этом значении элементы располагаются у начала главной оси.
Вся теория и выполнение задания доступны по подписке
Подписка — это:
После подписки вы получите доступ:
- теория тренажёров без ограничений;
- доступ ко всем платным тренажёрам;
- интересные и сложные вызовы для практики;
- безлимитные проверки испытаний.
Бесплатные материалы:
- Конспект части «Флексбокс. Знакомство»
- Статья «Примеры использования флексбоксов»
- Видео «Кому нужны флексы»