在flexbox中的空单元格

Question

通常有一个带有元素的flexbox：

.flexbox {
  display: flex;
  border: 2px solid red;
  padding: 2.5px;
}
.flexbox__item {
  border: 2px solid blue;
  height: 50px;
  margin: 2.5px;
  flex-grow: 1;
}

<div class="flexbox">
  <div class="flexbox__item"></div>
  <div class="flexbox__item offset-1"></div>
  <div class="flexbox__item"></div>
</div>

如何在.offset-*之后在此弹性工具箱中插入一个空单元格，而不使用其他标记，之后 之前

那些。它必须像这样出来，但没有指定块的宽度。只有flex-grow

.flexbox {
  display: flex;
  border: 2px solid red;
  padding: 2.5px;
}
.flexbox__item {
  border: 2px solid blue;
  height: 50px;
  margin: 2.5px;
  width: 25%;
}

.offset-1 {
  margin-right: calc(25% + 5px);
}

<div class="flexbox">
  <div class="flexbox__item"></div>
  <div class="flexbox__item offset-1"></div>
  <div class="flexbox__item"></div>
</div>

细胞数量未知。 Offset-1表示您需要创建一个空单元格，offset-2表示两个单元格，依此类推。

Answer 1

可以使用额外的包装器 - 包装器将会生长，并且生长包装器内的单元元素将占据包装器宽度的1 / 2,1 / 3等。

.flexbox {
  display: flex;
  border: 2px solid red;
  padding: 3px;
}

.flexbox__item {
  margin: 3px;
  flex-grow: 1;
}

.flexbox__item-inner {
  border: 2px solid blue;
  height: 50px;
}

.offset-1 {
  flex-grow: 2;
}

.offset-1 .flexbox__item-inner {
  width: 50%;
}

.offset-2 {
  flex-grow: 3;
}

.offset-2 .flexbox__item-inner {
  width: 33.33%;
}

<div class="flexbox">
  <div class="flexbox__item">
    <div class="flexbox__item-inner"></div>
  </div>
  <div class="flexbox__item offset-1">
    <div class="flexbox__item-inner"></div>
  </div>
  <div class="flexbox__item">
    <div class="flexbox__item-inner"></div>
  </div>
</div>

<div class="flexbox">
  <div class="flexbox__item">
    <div class="flexbox__item-inner"></div>
  </div>
  <div class="flexbox__item offset-2">
    <div class="flexbox__item-inner"></div>
  </div>
  <div class="flexbox__item">
    <div class="flexbox__item-inner"></div>
  </div>
</div>