Улучшенный способ установки расстояния между элементами flexbox

Чтобы установить минимальное расстояние между элементами 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>
Salman A
Редактировал вопрос 3-го декабря 2018 в 7:27
Программирование
css3 css flexbox
17-го декабря 2013 в 5:35
44 просмотров
Комментарии к вопросу (12)
Решение
  • Flexbox не имеет сворачивающихся полей.
  • Flexbox не имеет ничего похожего на border-spacing для таблиц (за исключением CSS свойства gap, которое не очень хорошо поддерживается в большинстве браузеров, caniuse).

Поэтому добиться того, о чем вы просите, немного сложнее.

По моему опыту, самый "чистый" способ, который не использует :first-child/:last-child и работает без каких-либо изменений в flex-wrap:wrap, это установить padding:5px для контейнера и margin:5px для дочерних элементов. Это создаст 10px зазор между каждым дочерним элементом и между каждым дочерним элементом и его родителем.

[Demo](http://jsfiddle.net/7XD8s/)

.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>
Flimm
Редактировал ответ 21-го сентября 2019 в 3:42
Комментарии (9)

Это не хак. Тот же метод используется Bootstrap и его сетки, хотя, вместо маржи, загрузочный использует отступы для своей суровостью.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
Комментарии (6)

адаптируемых блоков CSS и в Calc()

Здравствуйте, ниже-это мое рабочее решение для всех браузеров, поддерживающих спецификации 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);
}

в

Alex Nolasco
Редактировал ответ 24-го сентября 2019 в 3:53
Комментарии (5)

Вы можете использовать прозрачные границы.

Я размышлял над этим вопросом, пытаясь построить гибкую модель сетки, которая может вернуться к модели таблиц + таблица-ячейка для старых браузеров. И границы для желобов колонок показались мне лучшим подходящим вариантом. Т.е. у ячеек таблицы нет полей.

Например.

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

Также обратите внимание, что для flexbox необходимо min-width: 50px;. Гибкая модель не будет работать с фиксированными размерами, если вы не сделаете flex: none; на конкретном дочернем элементе, который вы хотите сделать фиксированным и, следовательно, исключить из числа "гибких". http://jsfiddle.net/GLpUp/4/. Но все колонки вместе с flex:none; уже не являются гибкой моделью. Вот что-то более близкое к гибкой модели: http://jsfiddle.net/GLpUp/5/

Таким образом, вы можете нормально использовать поля, если вам не нужно возвращение табличных ячеек для старых браузеров. http://jsfiddle.net/GLpUp/3/

Установка background-clip: padding-box; будет необходима при использовании фона, так как в противном случае фон будет перетекать в прозрачную область границы.

Комментарии (9)

Это будет работать для всех случаев, даже если есть несколько строк или любое количество элементов.

Мы используем [отображение: сетка;]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>

в

weBBer
Редактировал ответ 31-го октября 2019 в 5:25
Комментарии (2)

Вы можете использовать & > * + * в качестве селектора для эмуляции флекс-зазор (на одну строку):

в 

#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>

в

TylerH
Редактировал ответ 21-го августа 2019 в 1:09
Комментарии (0)

Позвольте'ы сказать, если вы хотите установить значение 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>

в

Комментарии (2)

Я нашел решение, которое базируется на общих селектор брат, ~, и позволяет бесконечной вложенности.

См. этот код рабочий пример пера

В основном, внутри контейнеров столбца, каждый ребенок, который предшествует другой ребенок попадает в верхнее поле. Кроме того, внутри каждого контейнера подряд, каждый ребенок, который предшествует другим достается левому краю.

в 

.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>

в

TylerH
Редактировал ответ 21-го августа 2019 в 1:09
Комментарии (2)

Переходя от Сава'ы ответ, здесь'ы немного улучшенная версия, которая позволяет установить фиксированный интервал между элементами без окружающих полей.

http://jsfiddle.net/chris00/s52wmgtq/49/

Также в комплект входит сафари на "-в 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>
Комментарии (1)

А контейнер 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;
}
Комментарии (3)

Я использовал это для завернутых и фиксированную ширину столбцов. Ключевым моментом здесь является расч()

Образец СКС

$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});}

}

Полный образец сайт CodePen

Комментарии (3)

В конце концов они добавят этот пробел свойство элемента. До тех пор вы могли бы использовать CSS сетки, вместо которой уже есть "щель" собственность, и только одну строку. Приятнее, чем иметь дело с полями.

Комментарии (1)

С адаптируемых блоков, создавая водостоки-это боль, особенно когда накрутка идет речь.

Вы должны использовать отрицательные поля (как показано в вопросе):

#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>

в

Более подробная информация:

Комментарии (0)

Используя адаптируемых блоков в своем решении я'вэ используется в <код>обосновать содержание</код> собственность на родительский элемент (контейнер) и я'вэ указанного поля внутри в <код>в гибком основании на< код> По свойствам элементов. Проверить фрагмент кода ниже:

в 

.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>

в

Комментарии (0)

Здесь'с моим решением, что не'т требует установки любых классов на дочерние элементы:

.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.

Комментарии (0)

Почему бы не сделать это такой:

.item + .item {
    margin-left: 5px;
}

При этом используется смежными одноуровневый селектор, чтобы дать все.элемент элементы, кроме первого запас-ушел. Благодаря спецификации Flexbox, это даже приводит к одинаковой ширины элементов. Это также может быть сделано с маржи-топ с вертикальным расположением элементов и, конечно.

Комментарии (1)

Я часто использовать оператор + для таких случаев

в 

#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>

в

Комментарии (0)

Я считаю, что проще всего это сделать с помощью процентов и просто позволить полям соответствовать вашей ширине.

Это означает, что в итоге у вас получится что-то вроде этого, если использовать ваш пример

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Это означает, что ваши значения основаны на ширине, что может быть не всем удобно.

Комментарии (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, к сожалению.

TylerH
Редактировал ответ 22-го октября 2019 в 2:52
Комментарии (0)

Columnify - Соло класс для n столбцов

Адаптируемых блоков и СКС

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Адаптируемых блоков и CSS

в 

.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].

Комментарии (0)