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

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

  • автор:

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

Не работает flex-box. Конкретно:justify-content: center

Хочу что бы заголовок был по центру, но он все еще прижат к левому краю. Не понимаю в чем проблема.

Отслеживать

6,393 6 6 золотых знаков 26 26 серебряных знаков 57 57 бронзовых знаков

задан 11 фев 2018 в 17:11

Gleb Nazemnov Gleb Nazemnov

111 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков

в коде не хватает одного закрывающего

. вы понимаете разницу между между flex и inline-flex ?

11 фев 2018 в 17:26

да понимаю, и с div все нормально. если я ошибаюсь, поправьте пожалуйста.

11 фев 2018 в 17:30

1 ответ 1

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

У вас .header строчный элемент из-за того, что вы даете ему inline-flex . И он не занимает всю ширину родителя, а имеет ширину auto , т.е. ширину на основе ширин вложенных элементов, т.е. вашего залоговка. И, соответственно, заголовок выровнять относительно .header невозможно, т.к. он занимает всю ширину родителя. Можно выравнить .header , способами для строчных элементов, в частности для родителя .header (в данном случае body ) нужно дать text-align: center .

.header < flex-direction: row; justify-content: center; align-items: center; display: inline-flex; >body
 

Управление Ротаторами

Но вероятно вы не так все задумали. Поэтому:

.header < flex-direction: row; justify-content: center; align-items: center; display: flex; >.header div
 

Управление Ротаторами

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

Ankhena

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

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

noder_ss

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

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

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

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

css

  • CSS

Как сверстать не стандартный макет?

  • 1 подписчик
  • 8 часов назад
  • 40 просмотров

html

  • HTML
  • +1 ещё

Почему схлопываются внешние отступы соседних элементов?

  • 1 подписчик
  • 10 часов назад
  • 41 просмотр

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

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

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