order - 改变项目的顺序

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 flex 容器里的项目可以很容易去改变它们的顺序,而且不需要修改 html 代码 .. 默认这些项目的顺序就是添加它们的 html 代码的顺序, 1 就是排在第一 .. 最后这个是 5 ..

打开浏览器的开发者工具 .. 选中在 flex 容器里的一个项目 .. 打开 Computed 这个选项卡 .. 勾选一下 Show inherited properties ..

在这里找到 order 这个属性 .. 它的值是 0 .. 这个 order 属性可以控制项目在 flex 容器里的顺序 .. 回到编辑器 ..

比如我想让 1 这个项目排在所有这些项目的最后 .. 因为所有项目默认 order 属性的值都是 0 ,所以如果我把它设置成 1 的话,就会让这个项目排在最后 .. order: 1 ..

你会看到, 1 这个项目会在最后 .. 如果我想让 5 这个项目排在这些项目的最前面 .. 在这个项目的容器上,同样使用一个 order 样式 .. 可以把它的值设置成 -1 ,因为 -1 小于 0 ,这样它就会排在所有项目的最前面 ..

order 值是 -1 的项目排在最前面, 然后是 2,3,4 。它们的 order 属性的值都是默认的 0 ,所以它们的顺序就是 html 代码的顺序 .. 最后是 order 的值是 1 的这个项目 ..

order - 改变项目的顺序《 CSS:Flexbox 布局 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点