Содержание

Свойство justify-content | Справочник HTML CSS

Определяет, как элементы flexbox / grid выравниваются в соответствии с главной осью внутри контейнера

justify-content: center;

Пошаговый план! Как быстро научиться создавать сайты!

  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

justify-content: flex-start;

Элементы flexbox смещаются к началу главной оси контейнера

<style>
.example-1 {
    display: flex;
    justify-content: flex-start;
    outline: 2px dashed #ccc;
}
.example-1-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border-radius: 50%;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: flex-end;

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

<style>
. example-2 {
    display: flex;
    justify-content: flex-end;
    outline: 2px dashed #ccc;
}
.example-2-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border-radius: 50%;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: center;

Элементы flexbox / grid центрированы вдоль главной оси контейнера

 
<style>
.example-3 {
    display: flex;
    justify-content: center;
    outline: 2px dashed #ccc;
}
.example-3-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border-radius: 50%;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: space-between;

Оставшееся пространство распределяется между элементами flexbox / grid

<style>
. example-4 {
    display: flex;
    justify-content: space-between;
    outline: 2px dashed #ccc;
}
.example-4-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border-radius: 50%;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: space-around;

Оставшееся пространство распределяется вокруг элементов flexbox / grid. Пустое пространство до первого и после последнего элемента равно половине пространства между каждым элементом.

<style>
.example-5 {
    display: flex;
    justify-content: space-around;
    outline: 2px dashed #ccc;
}
.example-5-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border-radius: 50%;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: space-evenly;

Оставшееся пространство распределяется равномерно вокруг элементов flexbox / grid.

<style>
.example-6 {
    display: flex;
    justify-content: space-evenly;
    outline: 2px dashed #ccc;
}
.example-6-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border-radius: 50%;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: start;

Элементы grid смещаются к началу главной оси контейнера

<style>
.example-7 {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 15px;
    justify-content: start;
    outline: 2px dashed #ccc;
}
.example-7-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border: 2px solid #3ca065;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: end;

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

<style>
.
 
 example-8 {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 15px;
    justify-content: end;
    outline: 2px dashed #ccc;
}
.example-8-item {
    width: 100px;
    height: 100px;
    background: #75ca98;
    border: 2px solid #3ca065;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

justify-content: stretch;

Растягивает элементы grid контейнера так, чтобы они занимали равномерно всю ширину контейнера

<style>
.example-9 {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 15px;
    justify-content: stretch;
    outline: 2px dashed #ccc;
}
.example-9-item {
    height: 100px;
    background: #75ca98;
    border: 2px solid #3ca065;
}
</style>

<div>
    <div></div>
    <div></div>
    <div></div>
</div>
Читайте также
Обсуждение (0)

Свойство 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

Flexbox CSS #1 — display | justify-content

В текущем уроке разберем три основных свойства Flexbox CSS — display | justify-content | align-items. При помощи их можно выравнивать flex-элементы по горизонтали и вертикали. 

Посмотреть видео — 1# Видео-урок по flexbox CSS

See the Pen #1 Flexbox – display | justify-content | align-items by Denis (@Dwstroy) on CodePen.

Делаем площадку для тестирования свойств Flexbox

Для теории подготовим плацдарм, на котором буду рассматривать поведение flex-элементов. Для этого сделаю отдельную директорию (lesson) и создам в ней index файл. 

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>#1 Flexbox – display | justify-content | align-items</title>
</head>
<body>

Блок с классом dws-wrapper, будет служить оберткой всего содержимого. В нем пропишем заголовок с темой урока «#1 Flexbox – display | justify-content | align-items».

Далее нам понадобится, блок, который будет выступать в качестве flex-контейнера, в нутрии его расположим flex-элементы. Используем UL в качестве контейнера, а списки LI в качестве элементов. В нутрии добавлю текст с порядковым номером элемента. 

ul.flex-cont>li.flex-elem{elem-$}*6

<ul>
 <li>elem-1</li>
 <li>elem-2</li>
 <li>elem-3</li>
 <li>elem-4</li>
 <li>elem-5</li>
 <li>elem-6</li>
</ul>

Для более понятной визуализации придам оформление данным элементам.

Создам, и подключим два файла, в первом описываем стандартное оформление элементов, во втором прописываем правила по flexbox и все это расположим в новой директории css. 

<link rel="stylesheet" type="text/css" href="css/style. css">
<link rel="stylesheet" type="text/css" href="css/flexbox.css">

Когда речь идет о flexbox, вы визуально должны представлять перед собой какой-то контейнер. Что бы это было наглядней, UL представим в виде блока, где зададим для него базовый цвет, уберем маркировку списков и добавим внутренние отступы. Это будет будущей flex-контейнер. 

ul {
 background: #ccc;
 list-style-type: none;
 padding: 10px;
}

Затем оформим списки LI в качестве отдельных блоков, они являются дочерними элементами будущего flex-контейнера. Сделаем их фон определенного цвета, увеличим шрифт, которому присвоим белый цвет, и зададим внешние и внутренние отступы каждому элементу. Плюс дополнительно проведу еще некие оформления. 

li {
 background-color: #18758d;
 font-size: 20px;
 color: #ffffff;
 margin: 5px;
 padding: 10px;
}

.dws-wrapper {
 margin-top: 100px;
font-family: Verdana, sans-serif;
}

h2 {
  color: #114d5e;
  font-size: 16px;
  line-height: 25px;
 }
h2 span {
 color: #ffffff;
 background: #074249;
 padding: 3px 8px;
}

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

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

Разбираем три основных свойства FLEXBOX

Свойство display

Первое свойство, с которым познакомимся это display, при помощи которого объявляем flex-контейнер. 

<h2><span>display</span> (объявляем flexbox)</h2>

Свойство display  применимо только для контейнера, и имеет два значения:

display: flex – делает flex-контейнер блочным элементом который занимает всю ширину экрана. 

display: flex;

display: inline-flex – контейнер преобразуется в строчный элемент, который занимает только отведенное пространство. 

display: inline-flex;

Мы будем использовать flex, так как собираемся позиционировать элементы в нутрии flex-контейнера. 

.flex-cont {
 display: flex;
}

Обратите внимание, что когда объявили правило display: flex, все его дочерние элементы стали flex-элементами и приняли горизонтальное положение, выстраивавшиеся в ряд.  Такое ранее расположение мы достигали путем float: left к тому же, после последнего элемента нам приходилось сбрасывать обтекание, что бы фон блока не схлопывался. 

.flex-elem {
 float: left;
}

<div></div>

Теперь это мы делаем все одной записью display: flex, и нет проблем схлопыванием фона у контейнера.

Далее давайте разберем, горизонтальное выравнивание flex-элементов, но прежде немного о flex-контейнере и flex-элементах.

Для каждых из них есть свои определенные свойства, как для flex-контейнера, так и для flex-элементов. Когда задаем свойства для контейнера, тем самым мы задаем какое-то поведение всех его дочерних элементов. В тоже время, когда задаем свойство для элементов, это подразумевается правило для конкретного элемента или для какой-то группы.

В данном уроке мы работаем с контейнером, а соответственно свойство применяется ко всем его дочерним элементам.

Свойство justify-content – (Выравнивание по горизонтали)

Рассмотрим выравнивание flex-элементов по горизонтали, для этого есть свойство justify-content, оно применимо только для контейнера, имеет пять значений.

justify-content: flex-start, значение по умолчанию, все элементы позиционируются в начале контейнера. 

justify-content: flex-start;

justify-content: flex-end, элементы позиционирует в конце контейнера. 

justify-content: flex-end;

justify-content: center, все элементы позиционирует по середине flex-контейнера. 

justify-content: center;

justify-content: space-between, первый и последний элемент позиционируется по краям контейнера, а все остальные элементы равномерно распределяют пространство между собой. 

justify-content: space-between;

justify-content: space-around, элементы позиционируются по горизонтали равномерно, распределяя между собой все свободное пространство. 

justify-content: space-around;

Свойство align-items — (Выравнивание по вертикали)

Как с горизонтальным выравниванием, есть так же свойство для выравнивания flex-элементов по вертикали. 

<h2><span>align-items</span> - Выравнивание по вертикали</h2>

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

<ul>
 <li>elem-1</li>
 <li>elem-2</li>
 <li>elem-3</li>
 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Aut, blanditiis consectetur deserunt dolores eos error et explicabo iste iure labore laboriosam laudantium maxime neque nesciunt quo quos reiciendis suscipit unde!</li>
 <li>elem-5</li>
 <li>elem-6</li>
</ul>

Что мы видим, другие элементы так же растянулись на всю высоту контейнера.

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

align-items: stretch;

align-items: flex-start, элементы позиционируются по верхнему краю контейнера. 

align-items: flex-start;

align-items: flex-end, элементы позиционируются по нижнему краю контейнера. 

align-items: flex-end;

align-items: center, элементы выравниваются по центру flex-контейнера. 

align-items: center;

align-items: baseline, выравнивает элементы по базовой оси. На данный момент мы не увидим разницы от значения flex-start, но если добавить картинку, вы увидите другой результат. 

align-items: baseline;

<li><img src="https://unsplash.it/150/150?image=0"></li>

В уроке показал, как выравнивать flex-элементы по горизонтали и вертикали, если понравился материал поделись им в социальных сетях.

Урок подготовил Горелов Денис.

Разница между justify-self, justify-items и justify-content в сетке CSS

Я совсем запуталась. При поиске онлайн-ресурсов и документации большая часть документации этих свойств, похоже, ссылается на Flex-box, а не на grid. И я не знаю, насколько применима документация для эквивалентных свойств в Flex-box к сетке.

Итак, я пробовал ссылаться https://css-tricks.com/snippets/css/complete-guide-grid/, который определяет их следующим образом:

обоснуй-элементы — выравнивает содержимое внутри элемент сетки вдоль оси строк

оправдать-содержание — это свойство выравнивает сетку по оси строки

оправдывать-себя — выравнивает содержимое внутри элемента сетки по оси строки

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

  1. — это justify-items свойство в Flex-box такое же, как justify-items собственность в сетке? или они разные почему? (Другими словами, могу ли я повторно использовать документацию Flex-box для Grid)
  2. что делают (оправдывают-)содержание, себя и элементы?
  3. как (оправдать-)содержание, себя и предметы разные?

любое уточнение было бы весьма признательно.

Edit: поскольку все продолжают давать мне ресурсы Flex-box, я спрашиваю о css-grid, а не flex-box.

4 ответов

1

Как упоминал reiallenramos, » свойства justify-self и justify-items не реализованы в flexbox. Это связано с одномерным характером flexbox и тем, что вдоль оси может быть несколько элементов, что делает невозможным обоснование одного элемента. Для выравнивания элементов вдоль основной встроенной оси в flexbox используется свойство justify-content.» — MDN

2-3

этот снимок экрана из W3 делает отличную работу, показав, что они делают, и различия между ними.

для Больше информации и примера, я предложил бы вас проверить out:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
  • https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
  • https://www.smashingmagazine.com/2017/12/grid-inspector/

а для некоторых вдохновение:

  • https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
<дел>
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Используйте .flex-column для установки вертикального направления или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

 <дел>
  
Элемент Flex 1

  
Элемент Flex 2

  
Элемент Flex 3