Чтобы установить минимальное расстояние между элементами flexbox, я использую margin: 0 5px
на .item
и margin: 0 -5px
на контейнере. Для меня это похоже на взлом, но я не могу найти лучшего способа сделать это.
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
row-gap: 5px
- сделано.gap
свойство в flex-контейнерах ( caniuse )Ответы:
border-spacing
на таблицы (за исключением свойства CSS,gap
которое не поддерживается в большинстве браузеров, caniuse )Поэтому добиться того, что вы просите, немного сложнее.
По моему опыту, «самым чистым» способом, который не использует
:first-child
/:last-child
и работает без каких-либо изменений,flex-wrap:wrap
является установкаpadding:5px
на контейнер иmargin:5px
дочерние элементы. Это создаст10px
разрыв между каждым ребенком и между каждым ребенком и его родителем.демонстрация
источник
order
свойство установлено?:first-child/:last-child
не будет работать, как ожидалось.Это не хак. Тот же самый метод также используется загрузчиком и его сеткой, хотя вместо поля загрузчик использует отступ для своих столбцов.
источник
height:100%; width:100%
игнорированием заполнения элемента.flex-basis
не учитываютсяbox-sizing: border-box
, поэтому дочерний элемент с любым отступом или рамкой будет переполнять родительский (или перенос в этом случае). ИсточникFlexbox и CSS калькулятор с поддержкой нескольких строк
Здравствуйте, ниже мое рабочее решение для всех браузеров, поддерживающих flexbox. Нет отрицательных полей.
Скрипка Демо
Обратите внимание, этот код может быть короче с помощью SASS
Обновление 2020.II.11 Выровненные столбцы в последнем ряду слева
Обновление 2020.II.14 Удалено маржинальное дно в последнем ряду
источник
justify-content
.justify-content: space-evenly;
илиjustify-content: space-around;
.Вы можете использовать прозрачные границы.
Я размышлял над этой проблемой, пытаясь построить модель гибкой сетки, которая может вернуться к модели таблиц + ячеек таблицы для старых браузеров. И Границы для водосточных желобов показались мне лучшим подходящим выбором. то есть таблицы не имеют полей.
например
Также обратите внимание, что вам нужно
min-width: 50px;
для flexbox. Гибкая модель не будет обрабатывать фиксированные размеры, если вы неflex: none;
используете определенный дочерний элемент, который вы хотите зафиксировать и, следовательно, исключить из него"flexi"
. http://jsfiddle.net/GLpUp/4/ Но все столбцы вместе сflex:none;
уже не являются гибкой моделью. Вот что-то ближе к гибкой модели: http://jsfiddle.net/GLpUp/5/Таким образом, вы можете использовать поля в обычном режиме, если вам не нужен запасной элемент таблицы для старых браузеров. http://jsfiddle.net/GLpUp/3/
Настройка
background-clip: padding-box;
будет необходима при использовании фона, так как в противном случае фон будет перетекать в область прозрачной границы.источник
background-clip: padding-box
Это решение будет работать для всех случаев, даже если есть несколько строк или любое количество элементов. Но количество разделов должно быть таким же, как вы хотите, чтобы 4 в первом ряду и 3 во втором ряду, это не сработает, поэтому пространство для 4-го содержимого будет пустым, а контейнер не заполнится.
Мы используем
display: grid;
и его свойства.Недостаток этого метода в мобильном Opera Mini не будет поддерживаться, а в ПК это работает только после IE10 .
Примечание для полной совместимости браузера, включая IE11, пожалуйста, используйте Autoprefixer
СТАРЫЙ ОТВЕТ
Не думайте, что это старое решение, оно по-прежнему одно из лучших, если вам нужен только один ряд элементов, и оно будет работать со всеми браузерами.
Этот метод используется комбинацией CSS-братьев и сестер , поэтому вы можете манипулировать ею и многими другими способами, но если ваша комбинация неправильная, это также может вызвать проблемы.
Код ниже сделает свое дело. В этом методе нет необходимости давать
margin: 0 -5px;
в#box
обертку.Рабочий образец для вас:
источник
grid-template-columns
мы определяем не динамически. Поэтому, если вы дадите значение,1fr 1fr 1fr 1fr
то он разделит div на4fractions
и попытается заполнить дочерние элементы в каждомfractions
, насколько я знаю, это единственный выходgrid
. В ответе я сказал, что если пользователю нужно разделить div на 4 и использовать их со многими элементами даже для нескольких строк, этоgid
поможет.Вы можете использовать
& > * + *
в качестве селектора для эмуляцииflex-gap
(для одной строки):Если вам нужно поддерживать flex-упаковку , вы можете использовать элемент-оболочку:
источник
*
оператор не увеличивает специфичность, как вы могли ожидать. Таким образом, в зависимости от вашей текущей CSS, вам может понадобиться либо увеличить специфичность для.flex > *
селектора, либо добавить!important
к правилу, если есть другие селекторы, применяющие маржу к этому элементу.Допустим, если вы хотите установить
10px
пространство между элементами, вы можете просто установить.item {margin-right:10px;}
для всех, и сбросить его на последний.item:last-child {margin-right:0;}
Вы также можете использовать общий селектор братьев
~
или+
сестер, чтобы установить левое поле для элементов, исключая первый.item ~ .item {margin-left:10px;}
или использовать.item:not(:last-child) {margin-right: 10px;}
Flexbox настолько умен, что он автоматически пересчитывает и равномерно распределяет сетку.
Если вы хотите разрешить Flex Wrap , см. Следующий пример.
источник
:last-child
как не влияет на каждый последний дочерний элемент в конце строки, правильно?Я нашел решение, основанное на общем родном селекторе,
~
и допускает бесконечное вложение.Смотрите этот код пера для рабочего примера
По сути, внутри контейнеров столбцов каждый дочерний элемент, которому предшествует другой дочерний элемент, получает верхнее поле. Аналогично, внутри каждого контейнера строк каждый дочерний элемент, которому предшествует другой, получает левое поле.
источник
Переходя от ответа Sawa, вот немного улучшенная версия, которая позволяет устанавливать фиксированный интервал между элементами без окружающего поля.
http://jsfiddle.net/chris00/s52wmgtq/49/
Также включена версия Safari "-webkit-flex".
источник
Согласно #ChromDevSummit есть реализация
gap
свойства для Flexbox, хотя в настоящее время (14 ноября 2019 г.) оно поддерживается только в Firefox, но вскоре должно быть реализовано в Chrome:Live Demo
Я обновлю свой ответ, как только он попадет в Chrome тоже.
источник
Я использовал это для обернутых и фиксированных столбцов ширины. Ключ здесь
calc()
Образец SCSS
Полный образец Codepen
источник
Гибкий контейнер с -x (отрицательный) запасом и гибкими элементами с й (положительным) краем или обивкой как приводят к желаемому визуальному результату: Flex изделие имеет фиксированный зазор в 2 раза только между другом другом.
Похоже, это просто вопрос предпочтений, использовать ли поля или отступы для гибких элементов.
В этом примере гибкие элементы масштабируются динамически, чтобы сохранить фиксированный разрыв:
источник
В конце концов они добавят
gap
свойство в flexbox. До этого вы могли использовать CSS-сетку, у которой уже естьgap
свойство, и иметь только одну строку. Приятнее, чем иметь дело с наценками.источник
CSS
gap
свойство:Существует новое
gap
свойство CSS для многостолбцовых, flexbox и сеточных макетов, которое теперь работает в некоторых браузерах! (См. Могу ли я использовать ссылку 1 ; ссылка 2 ).На момент написания, это работает только в Firefox, к сожалению. В настоящее время он работает в Chrome, если вы включите «Включить экспериментальные функции веб-платформы» в
about:flags
.источник
Используя Flexbox в своем решении, я использовал
justify-content
свойство для родительского элемента (контейнера) и указал поля внутриflex-basis
свойства элементов. Проверьте фрагмент кода ниже:источник
При использовании flexbox создание желобов - это боль, особенно при обмотке.
Вам нужно использовать отрицательные поля ( как показано в вопросе ):
... или измените HTML ( как показано в другом ответе ):
... или что-то другое.
В любом случае, вам нужен уродливый взлом, чтобы он заработал, потому что flexbox не предоставляет функцию "
flex-gap
" ( по крайней мере, на данный момент ).Однако проблема с желобами проста и удобна с помощью CSS Grid Layout.
Спецификация Grid предоставляет свойства, которые создают пространство между элементами сетки, игнорируя пространство между элементами и контейнером. Эти свойства:
grid-column-gap
grid-row-gap
grid-gap
(сокращение для обоих свойств выше)Недавно спецификация была обновлена в соответствии с модулем выравнивания блоков CSS , который предоставляет набор свойств выравнивания для использования во всех моделях блоков. Итак, свойства сейчас:
column-gap
row-gap
gap
(Сокращенная)Однако не все браузеры, поддерживающие Grid, поддерживают новые свойства, поэтому я буду использовать оригинальные версии в демонстрационной версии ниже.
Также, если необходим интервал между элементами и контейнером,
padding
контейнер отлично работает (см. Третий пример ниже).Из спецификации:
Больше информации:
источник
Почему бы не сделать это так:
При этом используется соседний селектор брата , чтобы задать все
.item
элементы, кроме первого amargin-left
. Благодаря flexbox, это даже приводит к одинаково широким элементам. Это также может быть сделано с вертикально расположенными элементами иmargin-top
, конечно же.источник
Вот мое решение, которое не требует установки классов для дочерних элементов:
Применение:
Тот же метод можно использовать для обычных строк и столбцов сгиба в дополнение к приведенному выше примеру встроенного примера и расширить классами для разнесения, отличного от 4px.
источник
Я часто использую оператор + для таких случаев
источник
Я считаю, что самый простой способ сделать это с процентами и просто позволить марже подсчитать вашу ширину
Это означает, что вы получите что-то подобное, если будете использовать пример
Означает ли, что ваши значения основаны на ширине, хотя это может быть не всем.
источник
Вот сетка элементов пользовательского интерфейса карты с интервалом, заполненным с помощью гибкой рамки:
Я был разочарован ручным интервалом между картами, манипулируя отступами и полями с сомнительными результатами. Итак, вот комбинации CSS-атрибутов, которые я нашел очень эффективными:
Надеюсь, что это помогает людям, настоящее и будущее.
источник
Columnify - одиночный класс для N столбцов
Flexbox и SCSS
Flexbox и CSS
Играть с ним на JSFiddle .
источник
источник
Просто используйте
.item + .item
в селекторе, чтобы соответствовать от второго.item
источник
Предполагая, что:
Установите левое поле для каждого элемента, кроме 1-го, 5-го, 9-го элемента и т. Д .; и установить фиксированную ширину для каждого элемента. Если левое поле равно 10px, то каждая строка будет иметь отступ 30px между 4 элементами, процентная ширина элемента может быть рассчитана следующим образом:
Это достойное решение для проблем, связанных с последним рядом flexbox.
источник
Есть действительно хороший, аккуратный, CSS-единственный способ сделать это (который можно считать «лучше»).
Из всех ответов, опубликованных здесь, я нашел только один, который успешно использует calc () (автор Dariusz Sikorski). Но когда поставлено с: «но это терпит неудачу, если в последнем ряду есть только 2 пункта», не было никакого расширенного решения.
Это решение решает вопрос ОП с альтернативой отрицательной марже и решает проблему, поставленную перед Дариушем.
ноты:
calc()
позволяет браузеру делать математику так, как он хочет -100%/3
(хотя 33,3333% должны работать так же хорошо) , и(1em/3)*2
(хотя .66em также должен работать хорошо) .::after
для заполнения последней строки, если элементов меньше, чем столбцовТакже на https://codepen.io/anon/pen/rqWagE
источник
Вы можете использовать новое свойство
gap
. Я копирую и вставляю объяснение, которое я нашел в этой статье , а также дополнительную информациюК сожалению, сейчас только FireFox поддерживает разрыв в гибких макетах.
источник
gap
было уже рекомендовано в ответе здесь stackoverflow.com/a/58041749/2756409 Кроме того, это не CSS.Это не будет работать в каждом случае, но если у вас есть гибкая дочерняя ширина (%) и вы знаете количество элементов в строке, вы можете очень просто указать поля необходимых элементов, используя
nth-child
селекторов.Это во многом зависит от того, что вы подразумеваете под «лучше». Этот способ не требует дополнительной разметки обертки для дочерних элементов или отрицательных элементов - но обе эти вещи имеют свое место.
источник
Я столкнулся с той же проблемой ранее, а затем наткнулся на ответ на этот вопрос. Надеюсь, что это поможет другим для дальнейшего использования.
длинный ответ короткий, добавьте рамку вашему ребенку flex-items. тогда вы можете указать поля между flex-элементами по своему усмотрению. Во фрагменте я использую черный цвет для иллюстрации, вы можете использовать «прозрачный», если хотите.
источник
Трюк с отрицательной маржей на контейнере работает просто замечательно. Вот еще один пример, который отлично работает с порядком, упаковкой и чем-то другим.
источник