在flex项目列中，将最后两项放在一行中

Question

不修改HTML或使用一些position: absolute hackery，是否可以使此列表中的项目6和7并排显示在第6行？

ul { 
 
    border: 1px solid gray; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    width: 33%; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
}

<div class="flex-container"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 
</div>

https://jsfiddle.net/511qb3py/

Answer 1

这里有一个方法：

• 切换的flex-direction到row。
• 启用wrap。
• 给每个弹性项目足够的宽度，以便只有一个可以放在一条线上。这会强制下列项目创建新行。
• 给出最后两个项目（6和7）的宽度，以使两者适合一行。

ul { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    list-style-type: none; 
 
    border: 1px solid gray; 
 
} 
 
li { 
 
    flex: 0 0 66%; /* flex-grow flex-shrink flex-basis */ 
 
    text-align: center; 
 
    border: 1px solid #ccc; 
 
} 
 
li:nth-last-child(-n + 2) { 
 
    flex-basis: 45%; 
 
}

<div class="flex-container"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 
</div>

Answer 2

你可以这样说：

ul { 
 
    border: 1px solid gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    min-width: 33%; 
 
    max-width: 33%; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
    margin-left: 100%; 
 
    margin-right: 100%; 
 
} 
 
li:nth-last-child(-n + 2) { 
 
    margin: 0; 
 
}

<div class="flex-container"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 
</div>