it-swarm.com.ru

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

Чтобы установить минимальное расстояние между элементами 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>

482
Sasha Koss
  • Flexbox не имеет разрушающихся полей.
  • Flexbox не имеет ничего похожего на border-spacing для таблиц.

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

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

Демо

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

263
user652649

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

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
157
Roumelis George

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

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

например.

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

Также обратите внимание, что вам нужно 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; будет необходима при использовании фона, так как в противном случае фон будет перетекать в область прозрачной границы.

74
hexalys

flexbox и css calc ()

Здравствуйте, ниже мое рабочее решение для всех браузеров, поддерживающих flexbox. Нет отрицательных полей, нет взломов, нет обходных путей, чистый Css.

Fiddle Демонстрация

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

67
Dariusz Sikorski

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

Мы используем display: grid; и его свойства.

#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 Opera Mini не поддерживаются, а в ПК это работает только после IE11.


СТАРЫЙ ОТВЕТ

Если вы хотите, вы всегда можете использовать одноуровневая комбинация CSS:

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

Приведенный выше код поможет. В этом методе нет необходимости передавать margin: 0 -5px; оболочке #box

Рабочий образец для вас:

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

36
weBBer

Я нашел решение, основанное на селекторе css preceded by~ и допускающее бесконечное вложение.

Смотрите этот код пера для рабочего примера

По сути, внутри контейнеров столбцов каждый дочерний элемент, которому предшествует другой дочерний элемент, получает верхнее поле. Аналогично, внутри каждого контейнера строк каждый дочерний элемент, которому предшествует другой, получает левое поле.

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

17
Simon Epskamp

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

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

Также включена версия Safari "-webkit-flex".

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

Допустим, если вы хотите установить 10px пробел между элементами, вы можете просто установить .item {margin-right:10px;} для всех и сбросить его на последний .item:last-child {margin-right:0;}

Вы также можете использовать общий селектор братьев и сестер ~ или следующий селектор братьев +, чтобы установить левое поле для элементов, исключая первый .item ~ .item {margin-left:10px;}, или использовать функцию .item:not(:last-child) {margin-right: 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>

Если вы хотите разрешить flex wrap , см. Следующий пример.

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>

12
Stickers

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

#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 wrapping , вы можете использовать элемент обертки:

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

11
Do Async

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

Образец SCSS

$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

9
Veiko Jääger

Контейнер flex с -x (отрицательным) полем и элементы flex с x (положительным) полем или padding приводят к желаемому визуальному результату: Flex элементы имеют фиксированный зазор 2x только междудруг другом.

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

В этом примере гибкие элементы масштабируются динамически, чтобы сохранить фиксированный разрыв:

.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;
}
9
Tim

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

6
o-t-w

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

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

При этом используется соседний селектор брата , чтобы присвоить всем элементам .item, кроме первого, margin-left. Благодаря flexbox, это даже приводит к одинаково широким элементам. Это также можно сделать с помощью вертикально расположенных элементов и, конечно, margin-top.

4
tillsanders

Используя Flexbox в своем решении, я использовал свойство justify-content для родительского элемента (контейнера) и указал поля внутри свойства flex-basis элементов . Проверьте фрагмент кода ниже:

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

4
iClusterDev

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

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

3
wutzebaer

Вот мое решение, которое не требует установки классов для дочерних элементов:

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

3
MK10

При использовании flexbox создание желобов - это боль, особенно когда речь идет об обмотке.

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

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

... или что-то другое.

В любом случае, вам нужен уродливый взлом, чтобы заставить его работать, потому что flexbox не предоставляет функцию "flex-gap" ( по крайней мере, пока ).

Проблема с желобами, однако, является простой и легкой с помощью CSS Grid Layout.

Спецификация Grid предоставляет свойства, которые создают пространство между элементами сетки, игнорируя пространство между элементами и контейнером. Эти свойства:

  • grid-column-gap
  • grid-row-gap
  • grid-gap (сокращение для обоих свойств выше)

Недавно спецификация была обновлена ​​в соответствии с модулем выравнивания блоков CSS , который предоставляет набор свойств выравнивания для использования во всех моделях блоков. Итак, свойства сейчас:

  • column-gap
  • row-gap
  • gap (стенография)

Однако не все браузеры с поддержкой Grid поддерживают более новые свойства, поэтому я буду использовать оригинальные версии в демонстрационной версии ниже.

Кроме того, если необходим интервал между элементами и контейнером, padding на контейнере работает просто отлично (см. Третий пример в демонстрационном примере ниже).

Из спецификации:

10.1. Водосточные желоба: row-gap, column-gap и gap свойства

Свойства row-gap и column-gap (и их сокращение gap), если указано в сеточном контейнере, определите желоба между сеткой строки и столбцы сетки. Их синтаксис определен в CSS Box Alignment 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>

Дополнительная информация:

3
Michael_B

Columnify - одиночный класс для N столбцов

Flexbox и SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

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

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

2
zurfyx

Просто используйте .item + .item в селекторе для сопоставления со вторым .item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

2
Andrew Luca

Вот сетка элементов пользовательского интерфейса карты с интервалом, заполненным с помощью гибкой рамки:

 enter image description here

Я был разочарован ручным интервалом между картами, манипулируя отступами и полями с сомнительными результатами. Итак, вот комбинации CSS-атрибутов, которые я нашел очень эффективными:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}
<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

Надеюсь, что это помогает людям, настоящее и будущее.

1
buildpax

Предполагая, что:

  • Вы хотите 4 столбца сетки с оберткой
  • Количество предметов не обязательно кратно 4

Установите левое поле для каждого элемента, кроме 1-го, 5-го, 9-го элемента и т. Д .; и установите фиксированную ширину для каждого элемента. Если левое поле равно 10px, то каждая строка будет иметь отступ 30px между 4 элементами, процентная ширина элемента может быть рассчитана следующим образом:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Это достойный обходной путь для проблем, связанных с последним рядом flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

1
Salman A

Существует действительно хороший, аккуратный, CSS-единственный способ сделать это (который можно считать «лучше»).

Из всех ответов, размещенных здесь, я нашел только один, который успешно использует calc () (автор Dariusz Sikorski). Но когда поставлено с: «но это терпит неудачу, если есть только 2 пункта в последнем ряду», не было никакого расширенного решения.

Это решение решает вопрос ОП с альтернативой отрицательной марже и решает проблему, поставленную перед Дариушем.

заметки:

  • Этот пример демонстрирует только макет с 3 столбцами
  • Он использует calc(), чтобы позволить браузеру делать математику так, как он хочет - .100%/3(хотя 33,3333% должно работать так же хорошо), и (1em/3)*2(хотя .66em также должен работать хорошо).
  • Он использует ::after для заполнения последней строки, если элементов меньше, чем столбцов

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}
<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Также на https://codepen.io/anon/pen/rqWagE

1
aequalsb

Я считаю, что самый простой способ сделать это с процентами и просто позволить марже подсчитать вашу ширину

Это означает, что вы получите что-то подобное, если будете использовать пример

#box {
   display: flex;
}

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

Означает ли, что ваши значения основаны на ширине, хотя это может быть не всем.

1
lukefrake

Я столкнулся с той же проблемой ранее, а затем наткнулся на ответ на этот вопрос. Надеюсь, что это поможет другим для дальнейшего использования.

длинный ответ короткий, добавьте границу к своим дочерним flex-элементам . тогда вы можете указать поля между flex-элементами к тому, что вам нравится . Во фрагменте я использую черный для целей иллюстрации, вы можете использовать «прозрачный» ' если хочешь.

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

0
Tunasing

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

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}
<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>

0
cghislai

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

0
Amo Wu

Это не будет работать в каждом случае, но если у вас есть гибкая дочерняя ширина (%) и вы знаете количество элементов в строке, вы можете очень четко указать поля необходимых элементов, используя nth-child selector/s.

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

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}
<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

0
jnmrobinson

Я нашел взлом, потому что я действительно нуждаюсь в этом сам.

/* grid */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Вот сетка сообщений с категориями Nice Flex Growing . Думаю, вам понравится . См. Codepen

0
Keviin Cosmos

Я устанавливаю интервал для гибких элементов только в направлении, указанном их контейнером . Например. если гибкий контейнер настроен на поток слева направо (flex-direction:row), я только установлю поле right для его дочерних элементов, за исключением последнего:

.flex-lr{
    display:flex;
    flex-direction:row;
}

.flex-lr > *:not(:last-child){
    margin-right:5px;
}

На первый взгляд это может сработать, но подождите! этого не следует делать, если для justify-content установлено значение, отличное от start или end, поскольку все другие значения уже распределяют пространство самостоятельно.

А что, если предметы обернуть? Затем мы должны добавить пространство к правильной стороне поперечной оси. Но как узнать, позволяет ли контейнер обернуть его дочерним элементам? А что насчет wrap-reverse

Все эти соображения заставили меня подумать, что это не тривиальная задача и требует небольшого шага.

Мой подход основан на сборке краткого набора классов, который действует как оболочка flexbox. Это имеет некоторые преимущества:

  1. Это позволяет «централизовать» все префиксы вендора в одной точке и забыть об этом.
  2. Это позволяет сгруппировать свойства flexbox в один класс или даже переименовать некоторые формулировки, используемые flexbox, которые иногда могут показаться не слишком интуитивными (IMHO).
  3. Если я буду использовать эти классы, я смогу написать другие классы на основе значений свойств flex, на которые они полагаются. Например. Я мог бы установить интервал на основе направления потока, выравнивания поперечной оси, обтекания и т.д.

Я закончил тем, что создал конструктор flexbox, чтобы поэкспериментировать со всем этим, чтобы помочь себе (и другим) понять, как работает flexbox, и понять, как замечательный flexbox . Пожалуйста, не стесняйтесь использовать его по ссылке ниже:

http://algid.com/Flex-Designer

Итак, ниже вы найдете и расскажете о классах, которые я использую, и об интервале (запасе) для одного направления потока. Вы сможете сделать вывод о других или найти их по приведенной выше ссылке. Префиксы поставщиков здесь опущены для краткости.

/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}

/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}

/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}

/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}

/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}

/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}

А теперь то, что привело нас сюда: пространство между предметами:

/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}

/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}

/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}

Наконец, вот как должна выглядеть разметка:

<div class="flex-lr cross-align-center fm-3">
    <div>
        Some content here...
    </div>
    <div>
        A bit more stuff here...
    </div>
    <div class="flex-tb fm-3">
        <div>
            Now vertical content
        </div>
        <div>
            etc.
        </div>
    </div>
</div>

Это то, что я называю кодом вслух.

0
Mario Vázquez