html - 带有 flexbox 的一列宽度的空白空间

Question

我有一个父 div 和两个里面的 div。我想为那些子 div 保留特定的大小(列)。这在 flexbox 中可能吗？我正在为此苦苦挣扎。

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

第一个 child 的宽度应为 1 列，第二个 child 的宽度应为 2 列。在右侧，我希望有 1 列宽度的空白空间(因此父 div 的行为应该像它有 4 列一样)。

Answer 1

这是一个使用 flex-basis 的方法将 flex 元素设置为特定的百分比宽度。

在这个例子中，两个 flex 元素都不能shrink也不grow .将 100% 宽度拆分为四列，每列需要为父级宽度的 25%。第一项是 25%，第二项是 50%(两列宽)，右边留出 25% 的空间。

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
}

.child:nth-child(1) {
  flex: 0 0 25%
}

.child:nth-child(2) {
  flex: 0 0 50%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

---

编辑

我注意到您希望每列之间有一些空间。一种方法是向 flex 元素添加一些右边距百分比，然后从每个元素的 flex-basis 中减去该百分比。

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 3%;
}

.child:nth-child(1) {
  flex: 0 0 22%;
}

.child:nth-child(2) {
  flex: 0 0 47%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

如果您希望列之间的间距不是百分比，您可以使用 calc()计算适当的 flex 基础。但是，请注意，在发布本文时，IE 或 Edge 不支持此功能。

IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions) This example does not work: flex: 1 1 calc(50% - 20px);
caniuse.com

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 0.5em;
}

.child:nth-child(1) {
  flex: 0 0 calc(25% - 0.5em);
}

.child:nth-child(2) {
  flex: 0 0 calc(50% - 0.5em);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>