主页 / 问题 / 691959
Accepted
Yuri
Asked:2020-07-14 00:08:43 +0000 UTC2020-07-14 00:08:43 +0000 UTC

flexbox 中的空单元格

  • 772

有一个带有元素的常规 flebox：

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

如何在不使用额外标记的情况下将偏移后的空单元格插入到此 flexbox 中？

那些。你需要它看起来像这样，但没有指定块的宽度。只有弹性增长

.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- 两个，等等。

css

1 个回答

  1. Best Answer

    使用额外的包装纸是可能的 - 包装纸会增长，生长包装纸内的单元格元素将占据包装纸宽度的 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>

    • 3

相关问题