html – 从右下角开始阻止网格

概述我正在寻找一个很好的CSS方法来获得一个无序列表,总是在右下角结束.例如： || 1 || 2 3 || 4 || 5 在普通的块网格中,我使用的是浮动列表项.我一直在寻找flexbox的解决方案,但还没有想出任何令人满意的东西. 将一个项目添加到此列表将生成如下列表： 1 || 2 || 3 4 || 5 || 6 另一个是 || 我正在寻找一个很好的CSS方法来获得一个无序列表,总是在右下角结束.例如：

||  1  ||   2   3   ||  4  ||   5

在普通的块网格中,我使用的是浮动列表项.我一直在寻找flexBox的解决方案,但还没有想出任何令人满意的东西.

将一个项目添加到此列表将生成如下列表：

1   ||  2  ||   3   4   ||  5  ||   6

另一个是

||     ||   1  2   ||  3  ||   4   5   ||  6  ||   7

解决方法 您可以将FlexBox与flex-wrap一起使用：wrap-reverse和flex-direction：row-reverse.您可以根据需要添加任意数量的其他子元素. (注意：我将容器高度保留为默认值)

* {  Box-sizing: border-Box;  }  .x {    wIDth: 302px;    display: flex;    flex-direction: row-reverse;    flex-wrap: wrap-reverse;    border: 1px solID red;    flex-grow: 0;    flex-basis: 0%;  }  .y {    wIDth: 100px;    height: 100px;    border: 1px solID green;  }

<div >  <div >1</div>  <div >2</div>  <div >3</div>  <div >4</div>  <div >5</div></div>

总结

以上是内存溢出为你收集整理的html – 从右下角开始阻止网格全部内容，希望文章能够帮你解决html – 从右下角开始阻止网格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。