Чтобы установить минимальное расстояние между элементами flexbox, я использую margin: 0 5px
для .item
и margin: 0 -5px
для container. Для меня это кажется хаком, но я не могу найти лучшего способа сделать это.
[Пример][1]
#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>
border-spacing
для таблиц (за исключением CSS свойства gap
, которое не очень хорошо поддерживается в большинстве браузеров, caniuse).Поэтому добиться того, о чем вы просите, немного сложнее.
По моему опыту, самый "чистый" способ, который не использует :first-child
/:last-child
и работает без каких-либо изменений в flex-wrap:wrap
, это установить padding:5px
для контейнера и margin:5px
для дочерних элементов. Это создаст 10px
зазор между каждым дочерним элементом и между каждым дочерним элементом и его родителем.
[Demo](
).upper
{
margin:30px;
display:flex;
flex-direction:row;
width:300px;
height:80px;
border:1px red solid;
padding:5px; /* this */
}
.upper > div
{
flex:1 1 auto;
border:1px red solid;
text-align:center;
margin:5px; /* and that, will result in a 10px gap */
}
.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
Это не хак. Тот же метод используется Bootstrap и его сетки, хотя, вместо маржи, загрузочный использует отступы для своей суровостью.
.row {
margin:0 -15px;
}
.col-xx-xx {
padding:0 15px;
}
Здравствуйте, ниже-это мое рабочее решение для всех браузеров, поддерживающих спецификации Flexbox. Никакого отрицательного поля, не хаки, не обойти, чистый CSS.
[Скрипку Демо][1]
в
<div class="flexbox">
<div>col</div>
<div>col</div>
<div>col</div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
в .элемента { дисплей: флекс; флекс-направление: подряд; флекс-обертывание: обертывание; оправдать-содержание: пространство-между; }
.flexbox > div {
/*
1/3 - 3 columns per row
10px - spacing between columns
*/
box-sizing: border-box;
margin-bottom: 10px;
outline: 1px dotted red;
width: calc(1/3*100% - (1 - 1/3)*10px);
}
в
Вы можете использовать прозрачные границы.
Я размышлял над этим вопросом, пытаясь построить гибкую модель сетки, которая может вернуться к модели таблиц + таблица-ячейка для старых браузеров. И границы для желобов колонок показались мне лучшим подходящим вариантом. Т.е. у ячеек таблицы нет полей.
Например.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Также обратите внимание, что для flexbox необходимо min-width: 50px;
. Гибкая модель не будет работать с фиксированными размерами, если вы не сделаете flex: none;
на конкретном дочернем элементе, который вы хотите сделать фиксированным и, следовательно, исключить из числа "гибких"
.
flex:none;
уже не являются гибкой моделью.
Вот что-то более близкое к гибкой модели: http://jsfiddle.net/GLpUp/5/
Таким образом, вы можете нормально использовать поля, если вам не нужно возвращение табличных ячеек для старых браузеров. http://jsfiddle.net/GLpUp/3/
Установка background-clip: padding-box;
будет необходима при использовании фона, так как в противном случае фон будет перетекать в прозрачную область границы.
Мы используем [отображение: сетка;
]1 и его свойства.
в
#box {
display: grid;
width: 100px;
grid-gap: 5px;
/* Space between items */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* Decide the number of columns and size */
}
.item {
background: gray;
width: 100%;
/* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
height: 50px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
в
Недостатком данного способа является в Mobile Опера мини не будет поддерживаться и на ПК это работает только после того, как в IE10.
Примечание Для полной совместимости браузера, включая ИЕ11, пожалуйста, использовать Autoprefixer
Дон'т думаю, что это старое решение, это's по-прежнему один из лучших, если вы хотите только одну строку элементы и будет работать со всеми браузерами.
Этот метод используется сочетание УСБ брат, так что вы можете манипулировать им много других способов, но если ваша комбинация-это неправильно, это может вызвать проблемы также.
.item+.item{
margin-left: 5px;
}
Приведенный ниже код будет делать трюк. В этом методе, нет необходимости, чтобы дать маржа: 0 -5 пикселей;
к #Поле
фантик.
Рабочий образец для вас:
в
#box {
display: flex;
width: 100px;
}
.item {
background: gray;
width: 22px;
height: 50px;
}
.item+.item{
margin-left: 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
в
Вы можете использовать & > * + *
в качестве селектора для эмуляции флекс-зазор (на одну строку):
в
#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }
/* ----- Flexbox gap: ----- */
#box > * + * {
margin-left: 10px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
в
Если вам нужна поддержка гибкий обертывание, вы можете использовать элемент программы-оболочки:
в
.flex { display: flex; flex-wrap: wrap; }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }
/* ----- Flex gap 10px: ----- */
.flex > * {
margin: 5px;
}
.flex {
margin: -5px;
}
.flex-wrapper {
width: 400px; /* optional */
overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
<div class='flex'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
</div>
в
Позвольте'ы сказать, если вы хотите установить значение 10px
пространство между элементами, вы можете просто установить .пункт {маржи-право:значение 10px;}
для всех, и сбросить его в последний раз.пункт:в прошлом-ребенок {маржи-право:0;}`
Вы также можете использовать селектор общего родственный ~
или +
родственный установить левое по пунктам, кроме первого .пункт ~ .пункт {маржи-слева:значение 10px;}
или .пункт:не(:в прошлом-ребенок) {маржи-право: значение 10px;}
Модель Flexbox настолько умно, что оно автоматически пересчитывает и равномерно распределяет сетки.
в
body {
margin: 0;
}
.container {
display: flex;
}
.item {
flex: 1;
background: gray;
height: 50px;
}
.item:not(:last-child) {
margin-right: 10px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
в
Если вы хотите разрешить гибкий обруч, см. Следующий пример.
в
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
}
.item {
flex: 0 0 calc(50% - 10px);
background: gray;
height: 50px;
margin: 0 0 10px 10px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
в
Я нашел решение, которое базируется на общих селектор брат, ~
, и позволяет бесконечной вложенности.
См. этот код рабочий пример пера
В основном, внутри контейнеров столбца, каждый ребенок, который предшествует другой ребенок попадает в верхнее поле. Кроме того, внутри каждого контейнера подряд, каждый ребенок, который предшествует другим достается левому краю.
в
.box {
display: flex;
flex-grow: 1;
flex-shrink: 1;
}
.box.columns {
flex-direction: row;
}
.box.columns>.box~.box {
margin-left: 5px;
}
.box.rows {
flex-direction: column;
}
.box.rows>.box~.box {
margin-top: 5px;
}
<div class="box columns">
<div class="box" style="background-color: red;"></div>
<div class="box rows">
<div class="box rows">
<div class="box" style="background-color: blue;"></div>
<div class="box" style="background-color: orange;"></div>
<div class="box columns">
<div class="box" style="background-color: yellow;"></div>
<div class="box" style="background-color: pink;"></div>
</div>
</div>
<div class="box" style="background-color: green;"></div>
</div>
</div>
в
Переходя от Сава'ы ответ, здесь'ы немного улучшенная версия, которая позволяет установить фиксированный интервал между элементами без окружающих полей.
Также в комплект входит сафари на "-в WebKit-флекс" по версии.
.outer1 {
background-color: orange;
padding: 10px;
}
.outer0 {
background-color: green;
overflow: hidden;
}
.container
{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
background-color: rgba(0, 0, 255, 0.5);
margin-left: -10px;
margin-top: -10px;
}
.item
{
flex-grow: 1;
-webkit-flex-grow: 1;
background-color: rgba(255, 0, 0, 0.5);
width: 100px;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
<div class="outer1">
<div class="outer0">
<div class="container">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
А контейнер Flex с -х (минус) маржа и гибкий предметы с х (положительные) маржа или прокладка как привести в желаемый визуальный результат: Гибкий предметы исправлена разрыв 2х между друг друга.
Похоже, это просто вопрос предпочтений, следует ли использовать маржи или обивка на элементы изгиба.
В этом примере, элементы Flex являются динамически масштабируется в целях обеспечения фиксированного зазора:
.flex-container {
margin: 0 -5px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.flex-item {
margin: 0 5px; // Alternatively: padding: 0 5px;
flex: 1 0 auto;
}
Я использовал это для завернутых и фиксированную ширину столбцов. Ключевым моментом здесь является расч()
Образец СКС
$gap: 10px;
dl {
display: flex;
flex-wrap: wrap;
padding: $gap/2;
dt, dd {
margin: $gap/2;}
dt { // full width, acts as header
flex: 0 0 calc(100% - #{$gap});}
dd { // default grid: four columns
flex: 0 0 calc(25% - #{$gap});}
.half { // hall width columns
flex: 0 0 calc(50% - #{$gap});}
}
С адаптируемых блоков, создавая водостоки-это боль, особенно когда накрутка идет речь.
Вы должны использовать отрицательные поля (как показано в вопросе):
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
... или изменить HTML (как показано в другой ответ):
<div class='flex-wrapper'>
<div class='flex'>
<div class='box'></div>
<div class='box'></div>
...
</div>
</div>
... или что-то еще.
В любом случае, вам нужен грязный хак, чтобы заставить его работать, потому что на основе не'т предоставить "в флекс-Гапа в
" особенность
(по крайней мере сейчас).
Вопрос желобов, однако, является простым и легким в верстку сетки.
Таблицы спецификаций обеспечивает свойства, которые создают пространство между элементами сетки, игнорируя при этом расстояние между элементами и контейнер. Этими свойствами являются:
сетка-колонки-ГАП
сетка-строка-пробел
сетка-ГАП
(сокращенное оба свойства выше)Недавно, спецификация была обновлена, чтобы соответствовать УСБ коробка выравнивания модуля, который обеспечивает набор свойств выравнивания для использования во всех моделях коробки. Поэтому свойства сейчас:
разрыв
(стенография)Однако, не все сетки-поддержка браузеров поддержка новых свойств, поэтому я'будете использовать оригинальные версии в демо ниже.
Также, если расстояние между элементами и контейнер, отступ
на контейнер работает просто отлично (см. Третий пример в демо ниже).
Спецификации:
10.1. Водостоки: в строка-пробел
,
столбец-разрыви
разрыв` Свойстваи GT;
строка-пробел " и " колонна-ГАП
свойства (и стенографировать ихпробел
), если указано на контейнере Grid, определить водостоки между сеткой строк и столбцов. Их синтаксис, определенный в CSS для выравнивания коробка 3 §8 зазоры между коробками.влияние этих свойств, как будто пораженный линии сетки приобретенные толщина: сетка дорожке между двумя линиями сетки-это пространство между водостоки, которые их представляют.
в
.box {
display: inline-grid;
grid-auto-rows: 50px;
grid-template-columns: repeat(4, 50px);
border: 1px solid black;
}
.one {
grid-column-gap: 5px;
}
.two {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.three {
grid-gap: 10px;
padding: 10px;
}
.item {
background: lightgray;
}
<div class='box one'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<hr>
<div class='box two'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<hr>
<div class='box three'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
в
Более подробная информация:
Используя адаптируемых блоков в своем решении я'вэ используется в <код>обосновать содержание</код> собственность на родительский элемент (контейнер) и я'вэ указанного поля внутри в <код>в гибком основании на< код> По свойствам элементов. Проверить фрагмент кода ниже:
в
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
margin-bottom: 10px;
}
.item {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #999;
}
.item-1-4 {
flex-basis: calc(25% - 10px);
}
.item-1-3 {
flex-basis: calc(33.33333% - 10px);
}
.item-1-2 {
flex-basis: calc(50% - 10px);
}
<div class="container">
<div class="item item-1-4">1</div>
<div class="item item-1-4">2</div>
<div class="item item-1-4">3</div>
<div class="item item-1-4">4</div>
</div>
<div class="container">
<div class="item item-1-3">1</div>
<div class="item item-1-3">2</div>
<div class="item item-1-3">3</div>
</div>
<div class="container">
<div class="item item-1-2">1</div>
<div class="item item-1-2">2</div>
</div>
в
Здесь'с моим решением, что не'т требует установки любых классов на дочерние элементы:
.flex-inline-row {
display: inline-flex;
flex-direction: row;
}
.flex-inline-row.flex-spacing-4px > :not(:last-child) {
margin-right: 4px;
}
Использование:
<div class="flex-inline-row flex-spacing-4px">
<span>Testing</span>
<span>123</span>
</div>
Тот же метод может быть использован для нормальной гибкий строк и столбцов в дополнение к встроенным пример, приведенный выше, и расширенный с классами для расстояния другие, чем в 4px.
Почему бы не сделать это такой:
.item + .item {
margin-left: 5px;
}
При этом используется смежными одноуровневый селектор, чтобы дать все.элемент элементы, кроме первого запас-ушел
. Благодаря спецификации Flexbox, это даже приводит к одинаковой ширины элементов. Это также может быть сделано с маржи-топ с вертикальным расположением элементов и, конечно.
Я часто использовать оператор + для таких случаев
в
#box {
display: flex;
width: 100px;
}
.item {
background: gray;
width: 50px;
height: 50px;
}
.item + .item {
margin-left: 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
в
Я считаю, что проще всего это сделать с помощью процентов и просто позволить полям соответствовать вашей ширине.
Это означает, что в итоге у вас получится что-то вроде этого, если использовать ваш пример
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Это означает, что ваши значения основаны на ширине, что может быть не всем удобно.
Собственность # Усс пробел
:
Появился новый разрыв
свойства CSS для нескольких столбцов, адаптируемых блоков и макетов сетки, которая работает в некоторых браузерах сейчас! (См. Могу ли я использовать ссылка 1; Ссылка 2).
в
#box {
display: flex;
width: 100px;
background-color: red;
gap: 10px;
}
.item {
background: gray;
width: 50px;
height: 50px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
в
Как писать, это работает только в Firefox, к сожалению.
.columnify {
display: flex;
> * {
flex: 1;
&:not(:first-child) {
margin-left: 2rem;
}
}
}
в
.columnify {
display: flex;
}
.columnify > * {
flex: 1;
}
.columnify > *:not(:first-child) {
margin-left: 2rem;
}
<div class="columnify">
<div style="display: inline-block; height: 20px; background-color: blue;"></div>
<div style="display: inline-block; height: 20px; background-color: blue"></div>
<div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>
в
Играть с ним на [JSFiddle][1].