当前位置: 首页 > Web前端 > CSS

flex布局示例代码2

时间:2023-03-31 00:41:18 CSS

这次主要了解了flex布局中元素的几个属性。今天,我明白了一阶属性。order属性被翻译成成人词。元素按照order定义的序号顺序排列,序号小的在前。order:定义项目的排序顺序。值越小,排名越高,默认为0。https://developer.mozilla.org...在下面的实例中,我添加了焦点样式,以便当您从一个链接切换到另一个链接时,您可以看到突出显示的内容。如果您使用flex-direction更改顺序,您可以看到Tab键顺序如何继续遵循项目在源中列出的顺序。.box{显示:flex;弹性方向:行;}.box:nth-child(1){order:2;}.box:nth-child(2){order:3;}.box:nth-child(3){order:1;}.box:nth-child(4){order:3;}.box:nth-child(5){order:1;}

1
2
3
4
5
或者der属性旨在将项目按顺序排列。这意味着项目被分配一个代表其组的整数。然后根据该整数将项目按视觉顺序放置,最低值排在第一位。如果多个项目具有相同的整数值,则在该组中项目是根据源订单布局。例如,我有5个弹性项目,并按如下方式分配订单值:源项目1:订单:2源项目2:订单:3源项目3:订单:1源项目4:订单:3源项目5:order:1这些项目将按以下顺序显示在页面上:Sourceitem3:order:1Sourceitem5:order:1Sourceitem1:order:2Sourceitem2:order:3Sourceitem4:order:3Itemshavea显示已重新排列的来源顺序的数字。