我连续有4到8列，我不知道它们的大小。我希望其中2列的宽度是其他列的一半而不知道总共有多少列。我如何使用flexbox执行此操作？感谢。
因此，即5列应
[ 1 12.5% ] [ 2 12.5% ] [ 3 25% ] [ 4 25% ] [ 4 25% ]
答案 0 :(得分：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;
}
答案 1 :(得分：1)
以下是使用Flexbox执行此操作的两种方法，其中一种方法使用flex-grow或flex-basis。
使用flex-grow只需将前2个元素设置为1，这意味着它们将占用剩余空间的相同大小，然后为3-8个元素设置2，这意味着它们的尺寸应该是前两个尺寸的两倍。
这样做的缺点是剩余空间基于之后 每个元素中的内容所消耗的内容。
这可以在前两行（浅蓝色）中看到。
如果需要更精确的尺寸，flex-basis可以做到这一点，并且结合调整后的can-css-detect-the-number-of-children-an-element-has技巧。
美丽就是这样，你可以根据它们的数量使它们表现不同。
/* 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% 1}}。
这样的效果是这样的，因为它们的集合flex-basis的总和比它们的父集合宽，它们不适合，并且因为flex-shrink默认为1它们会平均缩小。 （并且由于没有剩余空间，flex-grow没有任何效果）