怎么调整flex布局，才能让每一行的元素为2^n个？

Question

已知有DOM树

<ul>
    <li> 1 <li>
    <li> 2 <li>
    ...
    <li> n <li>
</ul>

ul {
    display: flex;
    flex-wrap: wrap;
}

li {
    width: 50px;
    flex: 1;
}

ul的宽度是响应式的，在不使用js的前提下，改变ul的宽度，令每一行的li个数都是2^n(n∈N*)个。

Answer 1

flex 是 弹性布局，不是 为所欲为 布局

Answer 2

你的2^n是不是写错了？2的n次方？

Answer 3

每行2个？

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 1 </li>
    <li> 2 </li>
    <li> 1 </li>
    <li> 2 </li>
    <li> 1 </li>
    <li> 2 </li>
    <li> 1 </li>
    <li> 2 </li>
</ul>

<style>
ul {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
}

li {
    width: 50%;
    background: #C00;
    text-align: center;
    height:100px;
    line-height: 100px;
    font-size:100px;
}
</style>