Gap — светлое будущее для отступов в Flexbox (как в Grid)

[greabock]

https://caniuse.com/#search=gap
Всё-таки придется подождать годик

[SerafimArts]

Всё-таки придется подождать годик

Оптимистично =)

[barbudour]

Это точно)

[GoodProject]

На дворе почти 2022 год, все ещё ждем :)))

Поддержка 87% ещё слишком мала для использования в продакшене.

[Mazahaka007]

Уже 89. 2022 год будет полноценным для использования.

[Bookvarenko]

Интересная статья. Как раз немного занялся вёрсткой, и стало интересно, что есть ещё кроме старых добрых таблиц.

[llia6an]

Да, gap'a во flexbox'е очень не хватает.

[wmwart]

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

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}
.flex-item {
    width: calc(100% / 3);
    margin: 0.5rem;
}

[hisbvdis]

В вёрстке недавно, да.
Хотя статья является переводом.

Вот результат применения указанных Вами стилей: codepen.io/hisbvdis/pen/xxKmgvO
Вы не могли бы доработать пример, чтобы было наглядно видно?
А то пока что не очень работает.

[SiSteamNiK]

width: calc(95% / 3);

[n_dufy]

Там в width: calc(100% / 3 — 1rem);

[hisbvdis]

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

Просто складывается ощущение, что автор первого комментария этой ветки не прочитал статью и поспешил выдать решение, которое:
1) не совсем соответствует ситуации
2) в принципе, уже описано в конце статьи

[Xtray]

    width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items

Может, проще так:

width: calc((100% - 2rem) / 3); 

[polRk]

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

[neurocore]

Использование обёртки с паддингом сильно хуже?

[MeylisDay]

Очепятка в слове flex-shrink в предложении «Это также позволяет нам вернуться к использованию значений flex-grow/fles-shrink.»

[hisbvdis]

Хм. Вроде уже исправлял :)
Теперь точно исправил, спасибо.

[Akuma]

Отсутствие gap у flex было конечно сюрпризом, когда первый раз с ним начинаешь работать. Но потом как-то привыкаешь, честно говоря.
Хотя конечно когда будет поддержка, будет удобнее.

[dauren88]

а что делать если последний ряд не заполнялся, а что бы item-ы последнего ряда оставались того же размеры что и все что выше. и выравнивание с левой стороны чтобы было?

[wmwart]

const styles = theme => ({
    cardContainer:{ 
        display: 'flex',
        flexDirection: "row",
        flexWrap: "wrap",
        margin:  theme.spacing.unit * 2 * -1,
    },
cardWrapper: {
    padding: theme.spacing.unit * 3 / 2,
    boxSizing: "border-box",
    flexShrink: 0,
    flexGrow: 1,
    [theme.breakpoints.up('xs')]: {
      width: `${(100 / 1)}%`,
    },
    [theme.breakpoints.up('sm')]: {
      width: `${(100 / 2)}%`,
    },
    [theme.breakpoints.up('md')]: {
      width: `${(100 / 3)}%`,
    },
    [theme.breakpoints.up('lg')]: {
      width: `${(100 / 4)}%`,
    },
    [theme.breakpoints.up('xl')]: {
      width: `${(100 / 5)}%`,
    },
  },
card: {
    height: "100%",
    display: 'flex',
    flexDirection: "column",
  },
},

[wmwart]

опечатка

cardWrapper: {
    padding: theme.spacing.unit * 2,

[Gorky]

Я использую такой подход:

.items { margin-right: -40px;}
.items .item { width: calc(100% / 3 — 40px); }

3 — это количество колонок, 40px — это любой произвольный гэп в любых единицах. Работает везде вроде. На новую строку не перебрасывает за счет отрицательного отступа у контейнера.