如何动态获取包含间隙值的 flexbox 项目宽度？

Question

我使用 sass 创建了一个包含 12 列的动态网格系统，其中包含 flexbox “就像使用的一个引导程序”。我在项目之间使用了 1em 的“间隙”，但这会影响项目的宽度，并让其中一个包裹在底部。如何让项目宽度也包括获取所有项目的间隙

      <section className="container">
        <h1>This Is Section One</h1>
        <div className="row">
          <div className="card col-4">
            <p>For Parteners</p>
          </div>
          <div className="card col-4">
            <p>For Students</p>
          </div>
          <div className="card col-4">
            <p>For Innovators</p>
          </div>
        </div>
      </section>

// Scss

      @for $i from 1 through $grid_columns{
        .col#{$modifier}-#{$i}{
          flex: 0 0 100%/$grid_columns * $i
        }

      .container{
        max-width: $grid_bp-md *1px;
        margin: 0 auto;
    
        &-fluid{
          max-width: 100%;
          margin: 0;
        }
      }
    
      .row{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 1em;
      }

Answer 1

在计算弹性项目的大小时考虑 gap 大小。

您的弹性项目不知道弹性容器上设置的gap。所以在设置flex属性的flex-basis部分时需要手动考虑。

幸运的是，custom CSS properties 和 calc() 函数让这变得非常简单。

您可以计算弹性容器所需的一切，然后根据它应该占用的列数计算弹性项目的大小。

这是一个工作示例：

:root {
  background-color: seagreen;
}

section {
  margin: 20px 0;
}

.flex-container__col-12 {
  --container-col-count: 12;
  --container-gap-count: calc(var(--container-col-count) - 1);
  --gap-size: 20px;
  --combined-gap-size: calc(var(--container-gap-count) * var(--gap-size));
  --col-size: calc(
    (100% - var(--combined-gap-size)) / var(--container-col-count)
  );

  display: flex;
  gap: var(--gap-size);
}

.flex-item {
  --item-gap-count: calc(var(--item-col-count) - 1);
  --item-size: calc(
    var(--item-col-count) * var(--col-size) + var(--item-gap-count) *
      var(--gap-size)
  );
  flex: 0 0 var(--item-size);
  background-color: white;
  min-width: 0;
}

.col-1 {
  --item-col-count: 1;
}

.col-2 {
  --item-col-count: 2;
}

.col-4 {
  --item-col-count: 4;
}

<section class="flex-container__col-12">
  <div class="flex-item col-4">4 col</div>
  <div class="flex-item col-2">2 col</div>
  <div class="flex-item col-2">2 col</div>
  <div class="flex-item col-4">4 col</div>
</section>
<section class="flex-container__col-12">
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
  <div class="flex-item col-1">1 col</div>
</section>

附带说明一下，使用CSS Grid Layout 可以更轻松地实现像这样的动态网格系统。