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

Question

我连续有4到8列，我不知道它们的大小。我希望其中2列的宽度是其他列的一半而不知道总共有多少列。我如何使用flexbox执行此操作？感谢。

因此，即5列应

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

Answer 1

您可以将前两列包装在容器容器中，该容器容器等于其他列的宽度。

library(combinat)
library(data.table) 

myList <- permn(min_set)
myDT <- data.table(matrix(unlist(myList),byrow = T,ncol = 6))

> myDT
    V1 V2 V3 V4 V5 V6
 1:  a  a  a  b  b  c
 2:  a  a  a  b  c  b
 3:  a  a  a  c  b  b
 4:  a  a  c  a  b  b
 5:  a  c  a  a  b  b
 ---                  
716:  a  c  a  a  b  b
717:  a  a  c  a  b  b
718:  a  a  a  c  b  b
719:  a  a  a  b  c  b
720:  a  a  a  b  b  c

[[ x / 2 ] [ x / 2 ]] [         x         ] [         x         ]
          x

.main {
  display: flex;
  width: 100%;
  align-content: stretch;
  text-align: center;
}

.main > div {  
  flex: 1 1 100%;        
}

.main > div:not(.wrapper) {
  background: gray;
  margin: 0 2px;
}

.wrapper {
  display: flex;
}

.wrapper .half {  
  background: red;  
  flex: 1 1 50%;  
  margin: 0 2px;
}

Answer 2

以下是使用Flexbox执行此操作的两种方法，其中一种方法使用flex-grow或flex-basis。

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

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

这可以在前两行（浅蓝色）中看到。

如果需要更精确的尺寸，flex-basis可以做到这一点，并且结合调整后的can-css-detect-the-number-of-children-an-element-has技巧。

美丽就是这样，你可以根据它们的数量使它们表现不同。

Fiddle demo

＆＃13;

＆＃13;

/*  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

除了YD1m's answer之外，我们不需要包含2个第一个元素，只需设置flex-basis，其中前2个获取50%，其余100% 1}}。

这样的效果是这样的，因为它们的集合flex-basis的总和比它们的父集合宽，它们不适合，并且因为flex-shrink默认为1它们会平均缩小。 （并且由于没有剩余空间，flex-grow没有任何效果）

Fiddle demo