css - 反转 div 顺序多行
问题描述
我正在尝试使用 CSS 获得以下结果。
我希望第一个 div 从右下角开始。添加第二个 div 或第三个 div 时,它需要将自己放置在左侧的前一个 div 旁边,如下所示:
| div 3 | div 2 | div 1
考虑使用一个包装器 div 来包装 div 之后的下一个 div(div 4、5 和 6)。通常,这些 div 会随着文档的流动而进入前三个 div 之下。我希望它反过来像这样:
| div 7
| div 6 | div 5 | div 4
| div 3 | div 2 | div 1
我怎样才能做到这一点?
解决方案
在几分钟内弄清楚自己的问题时,我感到有点愚蠢,而事先在这个问题上绊倒了几个小时,但我正在查看flex-wrap: wrap-reverse
。换行在这里很重要。使用以下代码,结果实际上非常简单:
.container {
width: 700px;
margin: 0 auto;
border: 1px solid coral;
display: flex;
flex-direction: row-reverse;
align-content: end;
flex-wrap: wrap-reverse;
}
希望能帮助别人!
推荐阅读
- c++ - 函数指针类型不能用于函数原型
- architecture - 分析 API、新的微服务或与现有 API 集成?
- json - 如何从 objectmapper 获取具有漂亮打印和 json 视图的对象编写器?
- javascript - 属性或方法“cancella”未在实例上定义,但在渲染期间引用
- django - 如何在 Django 中以编程方式登录?
- dns - 在没有重定向的情况下在 Cloudfront 中指定源路径
- reactjs - 如何在点击事件的下钻图中上传/设置动态(使用 axios)数据?
- javascript - 尝试在控制台中记录函数时未定义
- c# - EntityFramework 中的 SaveChanges() 不保存更改。显示“函数评估需要所有线程运行”
- c# - 如何将 Database First Entity Framework 4 升级到 6