根据弹性儿童计数确定布局？

Question

有没有办法根据具体的儿童金额确定css / html的布局？

请参阅下面的布局示例。

我试图让它与n-child一起工作，但我可能做错了..

https://codepen.io/brycesnyder/pen/EvBzWq

但是我不确定是否有办法让所有元素的宽度都达到50％，如果有超过1个，则应该堆叠。

/* three items */
li:first-child:nth-last-child(3):not(:first-child),
li:first-child:nth-last-child(3) ~ li {
    background: green;
}

编辑：我知道这可以通过标准元素这样做：https://codepen.io/brycesnyder/pen/GvbbyY我希望能够只使用UL＆gt;李

Answer 1

所以...它并不完全“基于孩子的数量”，但你可以通过将你的弹性方向改为列，将宽度设置为50％，并让第一个元素具有所需的布局来实现柔性; 0 0 100％。您还需要将1子列表（：first-child：nth-​​last-child（1））的特殊情况设置为宽度100％。

关键css最终看起来像这样：

ul {
padding:10px 1px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    list-style-type: none;
}

li {
    outline:1px solid gray;
    text-align:center;
    width: 50%;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

li:first-child {
    height: 100%;
    flex: 0 0 100%;
}

/* one item */
li:first-child:nth-last-child(1) {
    width: 100%;
}

这是我设置的codepen：

https://codepen.io/kball/pen/yomyyg