Why is justify-content: space-between not working?
I am trying to implement flexbox but can’t get it to work. What am I missing? I have all the flexbox vendor prefixes in place.
The goal is to get the left most li to go flush with the left of the ul’s container and the right most li to go flush with the right-hand side of the ul’s container. Any help welcome.
3 Answers 3
One more thing to keep in mind, additional to the need of adding justify-content:space-between to the flex container and not to the elements themselves; Make sure that you don’t have empty elements (like an empty div or :after ) inside the container.
In my case turned out a JS adding an empty div as a «clearfix» from the days before flex, when things were done floating elements.
justify-content:space-between will justify for all the elements inside the container even those with no content, which can mess up the alignment and wrapping.
The problem is you should set justify-content: space-between; on element with display: flex property or better say on ‘parent’, so ‘child’ elements will be aligned with space between each other.
Flex properties are divided among two categories: The flex container and the flex items.
Some properties apply only to the container, other properties apply only to the items.
The justify-content property applies only to a flex container.
In your code, justify-content is applied to the items, so it’s having no effect.
Re-assign it to the container.
Of course, an element can be both a flex container and item, in which case all properties apply. But that’s not the case here. The li elements are solely flex items and will ignore container properties.
For a list of flex properties – divided by container and items – see: A Complete Guide to Flexbox
Css flexbox justify-content: space-between; не работает
Итак, дайте прикинем результат, который мы бы хотели получить:
и вариант, который получается:
Все дело в свойстве flex-grow установленном в любое значение отличное от 0.
Чаще эта проблема возникает при использовании которой записи flex: 1 1 150px; (первая единица). Т.е. верная запись, для данного примера будет flex: 0 1 150px;.
Также напомню, что flex-basis имеет приоритет перед height и width (в зависимости от того, как идет главная ось).
Свойство `justify-content` не работает на вложенном flexbox
Я новичок в HTML и CSS, и я столкнулся с проблемой с меню, которое я сейчас кодирую.
Я хотел бы сделать меню, используя вложенный flexbox. Он приближается к тому, что я хочу, но по какой-то причине я не могу понять, justify-content внутри детей flexbox, похоже, не применяется.
Спасибо за вашу помощь!
2 ответа
Свойство justify-content в вашем коде работает нормально.
Проблема заключается в том, что вы используете display: inline-flex , что делает контейнер flex настолько широким, как контент, оставляя justify-content без лишнего пространства для распространения.
Попробуйте использовать display: flex или добавьте width: 100% к своим правилам.
display:inline-flex означает, что ваш контейнер ведет себя как встроенный элемент — т.е. только настолько широкий, насколько это необходимо.
Нет смысла указывать justify-content: space-around в контейнере display:inline-flex , если контейнер также не имеет ширины (которой не хватает много ваших контейнеров display:inline-flex )
Свойство justify-content не работает
У меня странная проблема, с которой у меня проблемы. Итак, я работал над этим прототипом html5 шаблона, который использует flexbox. Хотя я столкнулся с одной небольшой проблемой. Я пытаюсь выделить небольшое пространство для боковой панели и области содержимого шаблона, применяя свойство «justify-content» к родительскому элементу div. Хотя это не добавляет пространство между боковой панелью и областью контента. Я не уверен, что я делаю неправильно. Так что, если кто-нибудь может мне помочь, это было бы здорово. Заранее спасибо!
Вот соответствующий CSS:
ПРИМЕЧАНИЕ. Если кому-то понадобится какая-либо другая часть моего css-кода, относящаяся к любому другому элементу моего html, пожалуйста, дайте мне знать, и я с радостью добавлю его и в этот вопрос.
8 ответов
justify-content действуеттолько в том случае, если после того, как ваши изогнутые элементы согнуты, остается свободное пространство для поглощения свободного пространства. В большинстве / многих случаях свободного места не останется, да и вообще justify-content ничего не сделаю.
Некоторые примеры, где это будет иметь эффект:
если ваши гибкие элементы негибкие ( flex: none или же flex: 0 0 auto ) и меньше, чем контейнер.
если ваши гибкие элементы гибкие, НО не может расти, чтобы поглощать все свободное пространство, из-за max-width на каждом из гибких предметов.
В обоих этих случаях justify-content будет отвечать за распределение избыточного пространства.
В вашем примере, тем не менее, у вас есть флекс, которые имеют flex: 1 или же flex: 6 без max-width ограничение. Ваши гибкие предметы будут расти, чтобы поглощать все свободное пространство, и не останется места для justify-content делать что-нибудь с.