flex justify-content: пробел между не работает
Однако у меня есть дополнительный div (который генерируется wordpress) поэтому мой html:
Если я сделаю это css:
Я получаю пробелы в крайнем левом и дальнем правом углу — внешние коробки не идут к краю. Если я удалю <div > и его </div> , тогда он отлично работает.
Если я поместил locationHolder в качестве отображения: flex и т.д. он не работает
Я мог бы удалить дополнительный div с jQ, но есть ли решение css, чтобы преодолеть это?
2 ответа
Добавить .textwidget::before, .textwidget::after < content: none; >. У вас есть content: «» , добавленный в строку 1341 для этого элемента, и он разбивает flex. Или просто удалите .textwidget::before, .textwidget::after из строки 1341;)
У меня также возникла проблема и прочитал много статей и нашел решение. Я, честно говоря, был ошибкой flexbox и собирался сообщить об этом. Наконец нашел причину проблемы.
Если у вас есть элементы psudo в элементе flex, эти элементы также будут согнуты.
Если вы импортировали Bootstrap, это, скорее всего, произойдет чаще, потому что Bootstrap добавляет псевдоэлементы для очистки float.
Если вы хотите использовать псевдоэлементы в гибком контейнере, который не нуждается в потоке, вы можете установить их абсолютное.
Цитата из спецификации >
Поскольку это вне потока, абсолютно позиционированное дочернее устройство flex контейнер не участвует в гибком макете
Почему justify-content space-between ничего не делает?
Я пытаюсь разделить деления top-nav и bot-nav по вертикали, используя justify-content: space-between . Однако он ничего не делает. Может кто-нибудь указать, что я делаю неправильно, пожалуйста?
Ответы (3)
Высота блочного элемента по умолчанию равна высоте содержимого блока, если вы не укажете конкретную высоту. А flexbox justify-content определяет, как браузер распределяет пространство между flex-элементами и вокруг них. Таким образом, по умолчанию это не будет иметь никакого эффекта с flex-direction:column .
Css flexbox justify-content: space-between; не работает
Итак, дайте прикинем результат, который мы бы хотели получить:
и вариант, который получается:
Все дело в свойстве flex-grow установленном в любое значение отличное от 0.
Чаще эта проблема возникает при использовании которой записи flex: 1 1 150px; (первая единица). Т.е. верная запись, для данного примера будет flex: 0 1 150px;.
Также напомню, что flex-basis имеет приоритет перед height и width (в зависимости от того, как идет главная ось).
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