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

Почему space-between не работает?

Привет.Почему в таком варианте стиль space-between не работает?Откройте страницу в полном окне так не будет видно.Тут маленькая пространство и блоки сжались.

Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 62 62 бронзовых знака
задан 5 фев 2018 в 11:16
7,026 4 4 золотых знака 29 29 серебряных знаков 62 62 бронзовых знака
у вас всего один дочерний элемент у data_item, там between нету по сути.
5 фев 2018 в 11:27
@ДмитрийПолянин то есть нужно дочерный элемент создать?
5 фев 2018 в 11:28

я не знаю что вы хотите получить, в вопросе этого не сказано, я просто написал почему у вас сейчас space-between никак не работает.

5 фев 2018 в 11:29

@ДмитрийПолянин я хочу что получить?ну ясно же написано почему не работает я хочу решить данную проблему и поставить отступы между блоками

5 фев 2018 в 11:30
может быть вам надо перенести space-between в row_without_margin
5 фев 2018 в 11:31

1 ответ 1

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

display: flex; flex-wrap: wrap; justify-content: space-between;

нужно задавать не item, а контейнеру. Можно обернуть еще в один див

Отслеживать
ответ дан 5 фев 2018 в 11:32
Вячеслав Курилов Вячеслав Курилов
499 3 3 серебряных знака 8 8 бронзовых знаков
благодарю вас . а я то думал уже час почему не работает
5 фев 2018 в 11:39

css
flexbox

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Ankhena

Расскажу, как научится самому разбираться с такими вопросами.
Если не умеете пользоваться инструментами разработчика, то просто обводите блоки цветными рамочками.
И сразу увидите, что нет никакого space, чтобы сработал space-between, да и любое другое выравнивание.

Решения вопроса 0
Ответы на вопрос 2

noder_ss

Линуксоид-энтузиаст и SQL разработчик
Если я правильно понял, то вы не указали размеры .nav , пропишите ему width:100%
Ответ написан 05 февр. 2023
Комментировать
Нравится Комментировать
Myakish999 @Myakish999

Попробуйте добавить следующий код:
*::after, *::before content: none;
>
У меня был такой глюк. Если установлен content: »; , то space-between у меня работал почти как space-around — крайние элементы не прижимались к краям.
И не слушайте всяких умников, советующих почитать чего-нибудь. Они, как правило, бездари.
p.s. не забудьте удостовериться, что правило заработало. :))

Ответ написан 07 мар. 2023
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

HTML
+1 ещё

Почему фоновая картинка то пропадает, то появляется?

1 подписчик
52 минуты назад
17 просмотров

Почему не работает justify-content: space-between (Flex)?

Есть задача — сделать одинаковые интервалы между 3-мя картинками в ряду. При этом левая и правая картинки должны быть прижаты к краям. Добавила к родителю свойство justify-content: space-between. Но интервал между картинками не появляется. Что можно поменять в коде? Заранее спасибо!

CSS:
.row width: 100%;
display: flex;
justify-content: space-between;
>
.col-4 width: 33.33%;
text-align: center;
>
img width: 100%; //mobile-responsive
>

Вопрос задан более трёх лет назад
9851 просмотр

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

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

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

Все дело в свойстве 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