在弹性项列中，将最后两个项放在单个行中 [英] In a column of flex items, place the last two items in a single row

问题描述

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

  ul {border：1px solid gray;显示：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/

解决方案

这里有一个方法：

• 切换 flex-direction 到 row 。


• 启用 wrap 。 b $ b
• 给每个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>  

Without modifying the HTML or using some position: absolute hackery, is it possible to make items 6 and 7 in this list appear side-by-side on row 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/

解决方案

Here's one method:

• Switch the flex-direction to row.
• Enable wrap.
• Give each flex item enough width so that only one can fit on a line. This forces the following items to create new lines.
• Give the last two items (6 and 7) a width that enables both to fit on one line.

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>

这篇关于在弹性项列中，将最后两个项放在单个行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！