Почему не работает justify content space between
Перейти к содержимому

Почему не работает justify content space between

  • автор:

Не работает justify-content: space-between

есть блок отзыва с фиксированными размерами, нужно чтобы между кнопкой-ссылкой «Подробнее» и текстом было свободное пространство. Я задал элементам флекс-раскладку, направление оси column и выравнивание space-between, но по итогу оно не срабатывает, хотя место для выравнивания есть. Использовал и обёртку дивами, и задавал минимальную высоту блоку с текстом, что не особо правильно — всё равно не работает. Подскажите что можно изменить. [![введите сюда описание изображения][1]][1]

.review_text-block < margin-left: 65px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-top: 35px; >.review_text < display: block; margin: 0; padding: 0; font-family: 'NotoSans'; font-style: normal; font-weight: normal; font-size: 15px; line-height: 24px; color: #E5E6EC; >.more

Отслеживать
задан 14 сен 2021 в 13:19
3 2 2 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Чтобы в данном примере работал justify-content: space-between , нужно свободное пространство между элементами. А у Вашего .review_text-block нет высоты, соответственно элементы прижаты друг к другу. Если есть такая необходимость, задайте блоку-обёртке высоту, бОльшую, чем сумма высот цитаты и кнопки, — тогда всё заработает.

Но для того, чтобы между кнопкой и цитатой было пространство, достаточно кнопке задать margin-top :

body < background-color: gray; >.review_text-block < margin-left: 65px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-top: 35px; >.review_text < display: block; margin: 0; padding: 0; font-family: 'NotoSans'; font-style: normal; font-weight: normal; font-size: 15px; line-height: 24px; color: #E5E6EC; >.more

Отслеживать
ответ дан 14 сен 2021 в 13:50
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 49 49 бронзовых знаков

С заданным margin-top кнопке есть проблема — она сама должна иметь отступ снизу. Мне показалось решение проблемы через предложенный вами способ с заданием высоты контейнеру-обёртке (сделал через min-height) более подходящим в моём случае. Спасибо.

14 сен 2021 в 14:23

@Alexey, а в чём проблема сделать margin и снизу, и сверху? Я вот в своём примере так сделал — вроде норм )

Css flexbox justify-content: space-between; не работает

Итак, дайте прикинем результат, который мы бы хотели получить:

pic1

и вариант, который получается:

pic1

Все дело в свойстве flex-grow установленном в любое значение отличное от 0.

Чаще эта проблема возникает при использовании которой записи flex: 1 1 150px; (первая единица). Т.е. верная запись, для данного примера будет flex: 0 1 150px;.

Также напомню, что flex-basis имеет приоритет перед height и width (в зависимости от того, как идет главная ось).

.flex < display: flex; border: 1px solid blue; justify-content: space-between; padding: 20px; >.flex > div

Свойство justify-content

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

1
2
3
4
5

#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 :

1
2
3
4
5

#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

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

1
2
3
4
5

#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

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

1
2
3
4
5

#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

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

1
2
3
4
5

#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 :

1
2
3
4
5

#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. Ось вниз

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

1
2
3
4
5

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

Пример . Выравнивание по началу горизонтальной оси (строки) в гриде

Давайте установим выравнивание для наших элементов по началу горизонтальной оси:

1
2
3
4
5

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

Пример . Выравнивание по центру горизонтальной оси в гриде

А теперь установим выравнивание для наших элементов по центру горизонтальной оси:

1
2
3
4
5

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

Пример . Выравнивание по концу горизонтальной оси в гриде

Давайте установим выравнивание для наших элементов по концу горизонтальной оси:

1
2
3
4
5

#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

Свойство для выравнивания элементов по основной оси в гридах и флексах.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.

При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.

Пример

Скопировать ссылку «Пример» Скопировано

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

 .container  display: flex; justify-content: space-between;> .container  display: flex; justify-content: space-between; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

Это свойство определяет, как распределяется свободное пространство между элементами вдоль главной оси (для флексбоксов), и по горизонтали (для гридов).

Как пишется

Скопировать ссылку «Как пишется» Скопировано

  • start — элементы прижимаются к тому краю, откуда начинается чтение на том языке, на котором отображается сайт.
  • end — элементы прижимаются к краю, противоположному началу направления чтения на языке сайта.
  • flex — start — элементы прижимаются к краю, от которого начинается основная ось.
  • flex — end — элементы прижимаются к краю, у которого основная ось заканчивается.
  • left — элементы прижмутся к левому краю родителя.
  • right — элементы прижмутся к правому краю родителя.
  • center — элементы выстраиваются по центру родителя.
  • space — between — крайние элементы прижимаются к краям родителя, оставшиеся выстраиваются внутри контейнера равномерно, так, чтобы между ними были одинаковые отступы.
  • space — around — свободное пространство делится поровну между элементами и по половине от этой доли размещается по бокам от каждого элемента. Таким образом, между соседними элементами будет равное расстояние, а снаружи крайних элементов — по половине этого расстояния.
  • space — evenly — свободное место будет распределено так, чтобы расстояние между любыми двумя элементами было одинаковым и расстояние от крайних элементов до края было таким же.

Если основная ось идёт горизонтально, то для сайта с направлением письма слева направо (LTR) значение start прижмёт элементы к левому краю, а значение end прижмёт элементы к правому краю. Для сайтов с направлением письма справа налево (RTL) элементы будут прижиматься к противоположным краям для аналогичных значений.

В случае, если указано свойство flex — direction : column , то значения left и right срабатывают как start .

Полный список свойств флексбоксов можно посмотреть в гайде по flexbox. А свойства гридов описаны в гайде по grid

  • Chrome 59, поддерживается 59
  • Edge 79, поддерживается 79
  • Firefox 81, поддерживается 81
  • Safari 11, поддерживается 11

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если внутри флекс-контейнера всего два элемента, то удобно использовать justify — content : space — between , чтобы прижать их к противоположным краям родителя. Это имитирует поведение свойства float , но без последствий.

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

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