(S)CSS Flex 未按预期调整大小答案

【问题标题】：(S)CSS Flex isn't sizing like intended(S)CSS Flex 未按预期调整大小
【发布时间】：2021-11-19 00:37:12
【问题描述】：

我正在尝试以 Bootstrap 的风格设计基于 Flex 的行系统（因此使用 .col-6 等类来调整大小）。但是，Flexbox 的行为并没有达到应有的水平……（列不齐平）到目前为止，我已经尝试过 width 和 flex-grow，两者都导致了我不想达到的类似结果。我做错了什么？

示例：https://jsfiddle.net/fjLmk8h5/ （此页面上的代码段显示不正确，因为它没有加载 scss）

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

【问题讨论】：

标签： html css flexbox row

【解决方案1】：

Kevin Powell 的这段视频将为您解惑https://youtu.be/fm3dSg4cxRI?t=135

【讨论】：

很遗憾，这个视频对我没有帮助...

【解决方案2】：

"对齐内容：居中；"使弹性项目居中删除“justify-content：center;”这就是为什么列不齐，将 .row/parent 包装到另一个 div 并添加 flex 和 justify-content: center 的显示；到正文以使 .row/parent 居中。 运行下面的代码 sn-p。

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>

【讨论】：