css - Flexbox 列的盒子大小是其他列的一半

Question

我连续有 4 到 8 列，但我不知道它们的大小。我希望其中 2 列的宽度是其他列的一半，而不知道总共有多少列。我将如何使用 flexbox 做到这一点？谢谢。

所以应该是 5 列

[ 1   12.5% ] [ 2   12.5% ] [ 3   25% ] [ 4   25% ] [ 4   25% ]

Answer 1

这里有两种使用 Flexbox 的方法，其中一种使用 flex-grow 或 flex-basis。

使用 flex-grow 只需将前 2 个元素设置为 1，这意味着它们将占用相同大小的剩余空间，然后设置 2 对于 3-8 个元素，这意味着它们的大小应该是前 2 个元素的两倍。

这样做的缺点是剩余空间是基于每个元素中的内容消耗之后剩余的空间。

这可以在前 2 行(浅蓝色)中看到。

---

如果需要更精确的尺寸，flex-basis 可以做到，这里结合了 can-css-detect-the-number-of-children-an-element-has 的调整版本把戏。

这样做的美妙之处在于，您可以根据它们的数量让它们表现不同。

Fiddle demo

/*  using flex-grow  */
.test1 .flexparent div:nth-child(1),
.test1 .flexparent div:nth-child(2) {
  flex-grow: 1;
  background: #aaf;
}
.test1 .flexparent div:nth-child(n+3) {
  flex-grow: 2;
}

/*  using flex-basis  */
/* four items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(4),
.test2 .flexparent div:first-child:nth-last-child(4) + div {
  flex-basis: calc(100% / 3 / 2);
  background: #0c0;
}
/* four items, last 2 */
.test2 .flexparent div:first-child:nth-last-child(4)  + div ~ div {
  flex-basis: calc(100% / 3);
}
/* five items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(5),
.test2 .flexparent div:first-child:nth-last-child(5) + div {
  flex-basis: calc(100% / 4 / 2);
  background: #0b0;
}
/* five items, last 3 */
.test2 .flexparent div:first-child:nth-last-child(5)  + div ~ div {
  flex-basis: calc(100% / 4);
}
/* six items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(6),
.test2 .flexparent div:first-child:nth-last-child(6) + div {
  flex-basis: calc(100% / 5 / 2);
  background: #0a0;
}
/* six items, last 4 */
.test2 .flexparent div:first-child:nth-last-child(6)  + div ~ div {
  flex-basis: calc(100% / 5);
}
/* seven items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(7),
.test2 .flexparent div:first-child:nth-last-child(7) + div {
  flex-basis: calc(100% / 6 / 2);
  background: #090;
}
/* seven items, last 5 */
.test2 .flexparent div:first-child:nth-last-child(7)  + div ~ div {
  flex-basis: calc(100% / 6);
}
/* eight items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(8),
.test2 .flexparent div:first-child:nth-last-child(8) + div {
  flex-basis: calc(100% / 7 / 2);
  background: #080;
}
/* eight items, last 6 */
.test2 .flexparent div:first-child:nth-last-child(8)  + div ~ div {
  flex-basis: calc(100% / 7);
}

/* general styles */
.flexparent {
  display: flex;
}
.flexparent.nr2, .test2 {
  margin-top: 4px;
}
.flexparent div {
  min-width: 0;                     /*  allow a flex item to shrink below its content  */
  margin: 0 2px;
  text-align: center;
  background: lightblue;
}
.test2 .flexparent div {
  background: lightgreen;
}
.flexparent div {
  padding: 2px 0;
}
.flexparent div:empty {
  padding: 10px 0;
}

<div class="test1">
 <div class="flexparent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
 </div>
</div>
<div class="test2">
 <div class="flexparent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
 </div>
</div>

---

除了YD1m's answer ，不需要包装前 2 个元素，只需设置它们的 flex-basis，其中前 2 个获得 50%，其余 100%.

它是这样工作的，因为它们的集合 flex-basis 的总和比它们的父级宽，它们将不适合，并且因为 flex-shrink 默认为 1 它们将同样收缩。 (因为没有剩余空间，flex-grow 没有任何效果)

Fiddle demo