在不修改 HTML 或使用一些 position:absolute
技巧的情况下,是否可以使此列表中的元素 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>
最佳答案
这是一种方法:
- 将
flex-direction
切换为row
。 - 启用
换行
。 - 为每个 flex 元素提供足够的宽度,以便只有一个元素可以放在一行上。这会强制以下元素创建新行。
- 为最后两项(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>
关于html - 在 Flex 元素列中,将最后两个元素放在一行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40011471/