【发布时间】：2019-07-03 05:25:53
【问题描述】：
出于学习的目的，我尝试创建一个基于flexbox的网格系统，但是用它创建东西后发现了一些问题：当总列占用100％的空间时，最后一列进入下一行（容器为flex-flow: row wrap;) 但是当它们不是 100% 时（例如，一列占 30%，另一列占 65%）它们在同一行...然后我发现这与边距有关，但仍然我解决不了。
我现在的疑问是：列的宽度使用什么？弹性基础？宽度
如何解决要解决的边距问题？我在 github 项目中看到过一个使用“gap”之类的东西，但我仍然不太明白它是如何工作的......
我尝试将 calc() 属性与 10px 的“- $ gap”一起添加，但我仍然无法按照应有的方式生成网格。
我之前的代码是这样的：
.row {
display: flex;
}
@for $i from 1 through $grid-cols {
@media (max-width: 768px) {
.col-mob-#{$i} {
width: 100 / ($grid-cols / $i) * 1%;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.col-tab-#{$i} {
width: 100 / ($grid-cols / $i) * 1%;
}
}
@media (min-width: 1024px) and (max-width: 1407px) {
.col-hd-#{$i} {
width: 100 / ($grid-cols / $i) * 1%;
}
}
@media (min-width: 1408px) {
.col-fhd-#{$i} {
width: 100 / ($grid-cols / $i) * 1%;
}
}
}
编辑：我设法按照我想要的方式保留了它：
$grid-cols: 12;
$gap: 0.75rem !default;
// .row is used as container for divs with columns
.row {
display: flex;
}
@for $i from 1 through $grid-cols {
@media (max-width: 768px) {
.col-mob-#{$i} {
flex-basis: calc((100 / (#{$grid-cols} / #{$i}) * 1%) - #{$gap});
}
}
// ....
【问题讨论】：