Как изменить расстояние между flex элементами

Вариант 1 – отрицательный отступ для родительского блока

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для родительского контейнера .box.

CSS

.box {
  display: flex;
  margin: 0 -5px;
}
.item {
  flex: 1 1 auto;
  margin: 0 5px;
}

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark

Вариант 2 – без отрицательного отступа с отступами по бокам

Не используем отрицательные отступы и не используем :first-child/:last-child. Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px. Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.

CSS

.box {
  display: flex;
  padding: 0 5px;
}
.item {
  flex: 1 1 auto;
  margin: 0 5px;
}

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) on CodePen.dark

Вариант 3 – фиксированная ширина с помощью calc()

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc(). Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between.

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: calc(1/3*100% - (1 - 1/3)*10px);
  margin: 0 0 10px;
}

где 1/3 – это 3 колонки в ряд, и 10px – это ширина между колонками.

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) on CodePen.dark

Вариант 4 – фиксированная ширина с помощью calc() с отступами по бокам

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc(). Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.

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

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -5px;
}
.item {
  width: calc(1/3*100% - 10px);
  margin: 5px;
}

где 1/3 – это 3 колонки в ряд, и 10px – это ширина между колонками.

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 4 by Denis (@deniscreative) on CodePen.dark

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

Как много верстальщиков “сломало головы” при позиционировании элементов за все время активного развития сети Интернет!

Задачи из серии “расставить горизонтально три одинаковых (или разных) по ширине блока” или “позиционировать 2 блока по краям родительского, да еще и чтобы контент был центрирован по вертикали” отняли немало времени и нервов многих создателей веб страниц.

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

Когда-то при верстке веб-страниц вообще использовались таблицы. Поверьте, в Интернете до сих пор полно таких сайтов.

Позиционирование при помощи float имеет немало “подводных камней” и может создать для верстальщика новые проблемы.

Свойство position: absolut также не обладает нужной гибкостью, ведь контент с данным свойством просто “выпадает” из общего потока.

Наверняка многие из вас являются поклонниками технологии Bootstrap, которая действительно легко решает многие проблемы позиционирования блоков (и не только). Однако не всегда есть возможность интегрировать ее в проект.

Сегодня речь пойдет о позиционировании FlexBox.

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

Не важно по каким причинам вам это не удалось, сегодня мы рассмотрим FlexBox позиционирование так, что вы его полюбите и никогда уже больше не вспомните о float (разве что для обтекания текстом картинки).

Сразу небольшая оговорка. Я не буду рассказывать в этой статье о всех возможностях FlexBox – о них вы узнаете из последующих постов. Здесь мы раз и навсегда разберемся с позиционированием блоков. Вы увидите всю гибкость и бесспорные плюсы такого подхода.

Итак поехали!

Понимание Flex позиционирования

Для понимания Flex позиционирования будем использовать простейшую разметку.

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

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="purple"></div>
</div>

Зададим минимальные стили. Ширину и высоту для контейнера, а также высоту, ширину и цвет для внутренних элементов, чтобы их было видно.

.container {
    height: 200px;
    width: 100%;
}

.red {
    background-color: red;
    width: 100px;
    height: 100px;
}

.green {
    background-color: green;
    width: 100px;
    height: 100px;
}

.blue {
    background-color: blue;
    width: 100px;
    height: 100px;
}

.purple {
    background-color: purple;
    width: 100px;
    height: 100px;
}

Вот, что мы увидим:

Чтобы расставить элементы горизонтально, достаточно div с классом container прописать свойство display: flex.

.container {
    height: 200px;
    width: 100%;
    display: flex;
}

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

Расстояние между flex элементами

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

Однако сейчас наши квадратики прилипли друг к другу. Давайте поговорим о распределении элементов и расстоянии между ними.

Для управления расстоянием между элементами используется css свойство justify-content.

Это свойство также применяется к блоку-контейнеру и может принимать следующие значения:

• flex-start – элементы расположены друг за другом начиная с начала контейнера (оно применяется по умолчанию и соответствует виду из изображения выше);
• flex-end – элементы расположены друг за другом и смещены к концу контейнера;
• center – элементы расположены друг за другом и центрированы;
• space-between – элементы равномерно распределены от начала до конца контейнера с отступами между друг-другом;
• space- around – элементы равномерно расположены от начала до конца контейнера с отступами между друг-другом, а также от краев контейнера.

Теперь мы умеем распределять элементы по горизонтали.

Однако FlexBox технология также дает возможность выравнивать их и по вертикали.

Чтобы увидеть, как это происходит, зададим нашему контейнеру рамку.

.container {
    height: 200px;
    width: 600px;
    display: flex;
    justify-content: space-around;
    border: 2px solid #ccc;
}

Для выравнивания flex элементов по вертикали используется свойство align-items, которое применяется к контейнеру.

Здесь мы можем задать следующие значения:

• flex-start – значение по умолчанию, элементы выравниваются по верхней границе контейнера;
• flex-end – элементы выравниваются по нижней границе контейнера;
• center – элементы выравниваются по середине контейнера.

Направление flex-элементов

Кроме всего прочего мы можем задать направление для flex-элементов при помощи flex-direction.

Свойство может принимать следующие значения:

• row – слева направо (по умолчанию);
• row-reverse – справа налево;
• column – сверху вниз;
• column-reverse – снизу вверх.

Многострочность flex-контейнера

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

За это отвечает свойство контейнера flex-wrap.

Оно может принимать следующие значения:

• nowrap – элементы в одной строке, если не помещаются в контейнер, то выходят за его границы (стоит по умолчанию);
• wrap – элементы переносятся на следующие строки, если не помещаются в одну;
• wrap-reverse – похоже на wrap, только в обратном направлении.

Чтобы посмотреть, как это работает, давайте добавим в нашу верстку побольше элементов, например, еще 8.

Итак, если мы не зададим свойство flex-wrap или зададим его со значением nowrap, то получим такой результат.

.container {
    height: 200px;
    width: 600px;
    display: flex;
    justify-content: space-around;
    border: 2px solid #ccc;
    flex-wrap: nowrap;
}

При значении flex-wrap: wrap увидим следующую картину:

Если зададим flex-wrap: wrap-reverse, то получим вот что:

Выравнивание многострочного контента внутри контейнера

Мы можем определять положение многострочного контента внутри контейнера по вертикальной оси (если элементы расположены горизонтально).

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

Отвечает за такое выравнивание свойство align-content.

Принимает следующие значения:

ачения:

• flex-start  (по умолчанию);
• flex-end
• center
• space-between
• space-around
• stretch (если элементам задана высота, то будет проигнорировано).

Для большей наглядности я увеличу высоту нашего контейнера, а в верстке оставлю 8 элементов.
У контейнера в итоге будут следующие стили:

.container {
    height: 400px;
    width: 600px;
    display: flex;
    border: 2px solid #ccc;
    flex-wrap: wrap;
    align-content:flex-start;
}

Вы можете видеть align-content:flex-start – значение по умолчанию. Давайте менять его и смотреть, что получится:

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

В следующей статье я расскажу вам о flex-стилях для самих элементов и тогда вы действительно ощутите всю мощь FlexBox.

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

With flexbox, creating gutters is a pain, especially when wrapping is involved.

You need to use negative margins (as shown in the question):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

… or alter the HTML (as shown in another answer):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

… or something else.

In any case, you need an ugly hack to make it work because flexbox doesn’t provide a «flex-gap» feature
(at least for now).

The issue of gutters, however, is simple and easy with CSS Grid Layout.

The Grid spec provides properties that create space between grid items, while ignoring the space between items and the container. These properties are:

• grid-column-gap
• grid-row-gap
• grid-gap (the shorthand for both properties above)

Recently, the spec has been updated to conform with the CSS Box Alignment Module, which provides a set of alignment properties for use across all box models. So the properties are now:

• column-gap
• row-gap
• gap (shorthand)

However, not all Grid-supporting browsers support the newer properties, so I’ll use the original versions in the demo below.

Also, if spacing is needed between items and the container, padding on the container works just fine (see the third example in the demo below).

From the spec:

10.1. Gutters: the row-gap, column-gap, and gap
properties

The row-gap and column-gap properties (and their gap shorthand),
when specified on a grid container, define the gutters between grid
rows and grid columns. Their syntax is defined in CSS Box Alignment 3
§8 Gaps Between Boxes.

The effect of these properties is as though the affected grid lines
acquired thickness: the grid track between two grid lines is the space
between the gutters that represent them.

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

More information:

• Browser Support for CSS Grid
• Make it easier to define margins that only apply between flex-items (discussion)
• Spacing between flexbox items

With flexbox, creating gutters is a pain, especially when wrapping is involved.

You need to use negative margins (as shown in the question):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

… or alter the HTML (as shown in another answer):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

… or something else.

In any case, you need an ugly hack to make it work because flexbox doesn’t provide a «flex-gap» feature
(at least for now).

The issue of gutters, however, is simple and easy with CSS Grid Layout.

The Grid spec provides properties that create space between grid items, while ignoring the space between items and the container. These properties are:

• grid-column-gap
• grid-row-gap
• grid-gap (the shorthand for both properties above)

Recently, the spec has been updated to conform with the CSS Box Alignment Module, which provides a set of alignment properties for use across all box models. So the properties are now:

• column-gap
• row-gap
• gap (shorthand)

However, not all Grid-supporting browsers support the newer properties, so I’ll use the original versions in the demo below.

Also, if spacing is needed between items and the container, padding on the container works just fine (see the third example in the demo below).

From the spec:

10.1. Gutters: the row-gap, column-gap, and gap
properties

The row-gap and column-gap properties (and their gap shorthand),
when specified on a grid container, define the gutters between grid
rows and grid columns. Their syntax is defined in CSS Box Alignment 3
§8 Gaps Between Boxes.

The effect of these properties is as though the affected grid lines
acquired thickness: the grid track between two grid lines is the space
between the gutters that represent them.

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

More information:

• Browser Support for CSS Grid
• Make it easier to define margins that only apply between flex-items (discussion)
• Spacing between flexbox items

With flexbox, creating gutters is a pain, especially when wrapping is involved.

You need to use negative margins (as shown in the question):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

… or alter the HTML (as shown in another answer):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

… or something else.

In any case, you need an ugly hack to make it work because flexbox doesn’t provide a «flex-gap» feature
(at least for now).

The issue of gutters, however, is simple and easy with CSS Grid Layout.

The Grid spec provides properties that create space between grid items, while ignoring the space between items and the container. These properties are:

• grid-column-gap
• grid-row-gap
• grid-gap (the shorthand for both properties above)

Recently, the spec has been updated to conform with the CSS Box Alignment Module, which provides a set of alignment properties for use across all box models. So the properties are now:

• column-gap
• row-gap
• gap (shorthand)

However, not all Grid-supporting browsers support the newer properties, so I’ll use the original versions in the demo below.

Also, if spacing is needed between items and the container, padding on the container works just fine (see the third example in the demo below).

From the spec:

10.1. Gutters: the row-gap, column-gap, and gap
properties

The row-gap and column-gap properties (and their gap shorthand),
when specified on a grid container, define the gutters between grid
rows and grid columns. Their syntax is defined in CSS Box Alignment 3
§8 Gaps Between Boxes.

The effect of these properties is as though the affected grid lines
acquired thickness: the grid track between two grid lines is the space
between the gutters that represent them.

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

More information:

• Browser Support for CSS Grid
• Make it easier to define margins that only apply between flex-items (discussion)
• Spacing between flexbox items

CSS Flexbox and CSS Grid are fantastic tools available for managing layout on the Web. Flexbox handles single-dimensional layouts very well, while CSS Grid handles two-dimensional layouts with columns and rows. Often we want to add space between the items within our layout. This post will show how to add space between flex items using the CSS gap property and the necessary workarounds for browser support.

Inline Flex

To demonstrate CSS Gap, we will use Flexbox. CSS Gap works in CSS Grid, but there are many cases where we have inline lists that need space without a defined grid.

<div class="flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
}

We use inline-flex to have flex items but display our parent element as an inline element instead of a block element. The flex-wrap: wrap property will allow our items to wrap as the parent container shrinks or is constrained.

If we want to add space between each item, we could use margin on each item.

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
}
.flex-gap > div {
  margin: 6px;
}

Margins works but is not the same behavior as CSS Gap space. Notice the extra space surrounding the boxes. With gap spacing, we only want space applied between the items. Using CSS Gap, we can achieve this.

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

CSS Gap is a feature of the CSS Grid spec and Flexbox. Currently Firefox is the only major browser that supports gap on flex items. Update: As of April 25, 2021, CSS Gap for Flexbox is supported in all major browsers! 🎉

To support older browsers that don’t support Flex Gap in Flexbox we can use a margin hack to create a close workaround.

<div class="emulated-flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.emulated-flex-gap > * {
  margin: 12px 0 0 12px;
}
.emulated-flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  margin: -12px 0 0 -12px;
  width: calc(100% + 12px);
}

We can set margin space on the top and left of each item. On the flex parent element, we use negative margins to counter the excess margin on the outer child elements. This technique will get a similar effect to CSS gap space.

We can clean up the CSS a bit by using CSS Custom Properties, so it is easier to change the margin spacing.

.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}
.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}

With this workaround, we can get something close to CSS Gap space in older browsers. With CSS Gap spacing, we can remove much of the white space complexities in CSS when using margins. Check out the full working demo below!