时间戳

首页 > 解决方案 > 基于 Flexbox 百分比的跨度“过度使用”有间隙的可用空间

css - 基于 Flexbox 百分比的跨度“过度使用”有间隙的可用空间

问题描述

我想利用新的 Flexbox Gap 属性，例如gap: 1rem.

这是一个简单的列布局，其中的块具有基于百分比的大小。我flex-basis用来设置大小。我希望这些块能够“浮动”多行。这就是为什么flex-wrap: wrap在父母身上。

<div class="flex gap">
  <div class="span-half">
    <div class="box">
      span-half
    </div>
  </div>
  <div class="span-half">
    <div class="box">
      span-half
    </div>
  </div>
  <div class="span-quarter">
    <div class="box">
      span-quarter
    </div>
  </div>
  <div class="span-quarter">
    <div class="box">
      span-quarter
    </div>
  </div>
  <div class="span-half">
    <div class="box">
      span-half
    </div>
  </div>
</div>

.box {
  background: #ddd;
  padding: .5rem;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.gap {
  gap: 1rem;
}

.span-half {
  flex-basis: 50%;
}

.span-quarter {
  flex-basis: 25%;
}

实际渲染

预计有两行：第一行由两个一半（50%）的容器组成。第二条线由两个四分之一 (25%) 的容器和一个三分之一 (50%) 的容器组成。

这在没有添加间隙时有效。但是一旦 gap 属性进入容器似乎会占用可用空间，但实际的 gap 大小会在此之上添加。

当未启用 flex-wrap 时，它似乎也适用于一行，但也许它只是以这种方式强制它进入布局。

我可以想象它需要一个 CSS calc 函数来从每行的总百分比中减去间隙占用的空间，但我想知道是否以及如何做到这一点。子项的数量不固定，可以是四分之一、一半、第三和第五个元素的任意组合。

供参考：我希望根据填充和边距重构我的 Teutonic CSS 设计系统的当前 Flexbox 网格系统：https ://teutonic.co/examples/flexbox#spans我也知道使用 CSS 网格的其他替代解决方案或而是浮动。

我希望这个问题足够清楚？

演示：https ://codepen.io/esher/pen/zYZojaK

标签： cssflexbox

解决方案

推荐阅读