我正试图以Bootstrap的风格设计一个基于Flex的行系统(因此使用.col-6等类来调整大小(。然而，Flexbox的行为并不像它应该的那样。。。(列不齐平(到目前为止，我已经尝试过宽度和弯曲度的增长，两者都会导致类似的结果，但我不想实现。我做错了什么？
示例：https://jsfiddle.net/fjLmk8h5/(此页面上的代码段没有正确显示，因为它没有加载scs(
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-basis: 0;
justify-content: center;
column-gap: .5rem;
&.nogap {
column-gap: 0;
}
}
$base: 12;
.col {
flex-grow: 1;
}
@for $i from 1 through $base {
.col-#{$i} {
width: percentage($i/$base);
}
}<html>
<head>
<style>
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
background-color: red;
}
</style>
</head>
<body>
<div class="row" style="margin-bottom: .5rem;">
<div class="col">#1</div>
<div class="col">#2</div>
<div class="col">#3</div>
<div class="col">#4</div>
<div class="col">#5</div>
<div class="col">#6</div>
<div class="col">#7</div>
<div class="col">#8</div>
<div class="col">#9</div>
<div class="col">#10</div>
<div class="col">#11</div>
<div class="col">#12</div>
</div>
<div class="row">
<div class="col-6">#1-6</div>
<div class="col">#7</div>
<div class="col-3">#8-10</div>
<div class="col-2">#11-12</div>
</div>
</body>
</html>"调整内容：居中"中心的柔性项目删除"；调整内容：居中"这就是为什么列不齐平的原因，将.row/pparent包装到另一个div中并添加flex和justify内容的显示：center；到正文以使.row/pparent居中。运行下面的代码片段
body{
display: flex;
justify-content:center;
}
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-basis: 0;
column-gap: .5rem;
&.nogap {
column-gap: 0;
}
}
$base: 12;
.col {
flex-grow: 1;
}
@for $i from 1 through $base {
.col-#{$i} {
width: percentage($i/$base);
}
}<html>
<head>
<style>
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
background-color: red;
}
</style>
</head>
<body>
<div class="grand-parent">
<div class="row" style="margin-bottom: .5rem;">
<div class="col">#1</div>
<div class="col">#2</div>
<div class="col">#3</div>
<div class="col">#4</div>
<div class="col">#5</div>
<div class="col">#6</div>
<div class="col">#7</div>
<div class="col">#8</div>
<div class="col">#9</div>
<div class="col">#10</div>
<div class="col">#11</div>
<div class="col">#12</div>
</div>
<div class="row">
<div class="col-6">#1-6</div>
<div class="col">#7</div>
<div class="col-3">#8-10</div>
<div class="col-2">#11-12</div>
</div>
</div>
</body>
</html>