Комментарии 22
https://caniuse.com/#search=gap
Всё-таки придется подождать годик
Интересная статья. Как раз немного занялся вёрсткой, и стало интересно, что есть ещё кроме старых добрых таблиц.
Да, gap'a во flexbox'е очень не хватает.
Вероятно вы недавно в верстке. Давно уже придумали кроссбраузерные паттерны на этот счет. Не стоит пугать людей.
.flex-container {
display: flex;
flex-wrap: wrap;
margin: -0.5rem;
}
.flex-item {
width: calc(100% / 3);
margin: 0.5rem;
}
В вёрстке недавно, да.
Хотя статья является переводом.
Вот результат применения указанных Вами стилей: codepen.io/hisbvdis/pen/xxKmgvO
Вы не могли бы доработать пример, чтобы было наглядно видно?
А то пока что не очень работает.
Хотя статья является переводом.
Вот результат применения указанных Вами стилей: codepen.io/hisbvdis/pen/xxKmgvO
Вы не могли бы доработать пример, чтобы было наглядно видно?
А то пока что не очень работает.
width: calc(95% / 3);
Там в width: calc(100% / 3 — 1rem);
Это всё хорошо и понятно.
Вот только в статье рассматривается ситуация, в которой у Flex-элементов нет отступов по бокам. Они прижаты к граням Flex-контейнера.
Я и решил уточнить, так как в первом комментарии данной ветки описано решение немного другой ситуации. Элементы имеют отступы.
И в конце статьи я описал известный мне пример решения.
Просто складывается ощущение, что автор первого комментария этой ветки не прочитал статью и поспешил выдать решение, которое:
1) не совсем соответствует ситуации
2) в принципе, уже описано в конце статьи
Вот только в статье рассматривается ситуация, в которой у Flex-элементов нет отступов по бокам. Они прижаты к граням Flex-контейнера.
Я и решил уточнить, так как в первом комментарии данной ветки описано решение немного другой ситуации. Элементы имеют отступы.
И в конце статьи я описал известный мне пример решения.
Просто складывается ощущение, что автор первого комментария этой ветки не прочитал статью и поспешил выдать решение, которое:
1) не совсем соответствует ситуации
2) в принципе, уже описано в конце статьи
width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items
Может, проще так:
width: calc((100% - 2rem) / 3);
Только для произвольного, динамически генерируемого количества столбцов это не сработает.
Использование обёртки с паддингом сильно хуже?
Очепятка в слове flex-shrink в предложении «Это также позволяет нам вернуться к использованию значений flex-grow/fles-shrink.»
Отсутствие gap у flex было конечно сюрпризом, когда первый раз с ним начинаешь работать. Но потом как-то привыкаешь, честно говоря.
Хотя конечно когда будет поддержка, будет удобнее.
Хотя конечно когда будет поддержка, будет удобнее.
а что делать если последний ряд не заполнялся, а что бы item-ы последнего ряда оставались того же размеры что и все что выше. и выравнивание с левой стороны чтобы было?
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",
},
},
Я использую такой подход:
.items { margin-right: -40px;}
.items .item { width: calc(100% / 3 — 40px); }
3 — это количество колонок, 40px — это любой произвольный гэп в любых единицах. Работает везде вроде. На новую строку не перебрасывает за счет отрицательного отступа у контейнера.
.items { margin-right: -40px;}
.items .item { width: calc(100% / 3 — 40px); }
3 — это количество колонок, 40px — это любой произвольный гэп в любых единицах. Работает везде вроде. На новую строку не перебрасывает за счет отрицательного отступа у контейнера.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Gap — светлое будущее для отступов в Flexbox (как в Grid)