时间戳

首页 > 解决方案 > 弹性列，除了一个具有弹性顺序的子项

html - 弹性列，除了一个具有弹性顺序的子项

问题描述

如何将.last-row使用弹性订单的哪个推送到下一行，同时将列表的其余部分保持在列的顶部？

ul{width: 100%;display: flex;list-style:none;}
li{flex: 0 0 25%;height: 40px;background: salmon;text-align:center}
li.last-row{order:1;background: maroon; flex: 0 0 100%;}
<ul>
  <li>Col</li>
  <li>Col</li>
  <li class="last-row">row</li>
  <li>Col</li>
  <li>Col</li>
</ul>

标签： htmlcssflexbox

解决方案

我假设你的意思是.last-row而不是last-order：

ul {
  width: 100%;
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

li {
  flex: 0 0 25%;
  height: 40px;
  background: salmon;
  text-align: center
  order: 1;
}

li.last-row {
  order: 2;
  background: maroon;
  flex: 0 0 100%;
}
<ul>
  <li>Col</li>
  <li>Col</li>
  <li class="last-row">row</li>
  <li>Col</li>
  <li>Col</li>
</ul>

您需要将li无类的顺序设置为1，然后确保您的 flex 父级设置为允许包装；.last-row2ulflex-wrap: wrap

推荐阅读