css - 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-* 之后以及在 after 和 before 之后在此 flexbox 中插入一个空单元格？

那些。它有必要像这样出来，但没有指定 block 的宽度。仅 flex 增长

.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

使用额外的 wrapper 是可能的 - wrapper 会增长，并且正在增长的 wrapper 内的单元格元素将占据 wrapper 宽度的 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>