这里是单行布局 使用ul>li 来布局

<ulclass="local-nav"><li><ahref="#"><spanclass="local-nav-icon-icon1"></span>攻略景点</a></li><li><ahref="#"><spanclass="local-nav-icon-icon2"></span>门票玩乐</a></li><li><ahref="#"><spanclass="local-nav-icon-icon3"></span>美食林</a></li><li><ahref="#"><spanclass="local-nav-icon-icon4"></span>周边游</a></li><li><ahref="#"><spanclass="local-nav-icon-icon5"></span>一日游</a></li></ul>

CSS样式如下，由于比较懒文字直接加在后面，没有放入标签中。先定义了整体的

.local-nav li [class^="local-nav-icon"]

在li 中类名中以local-nav-icon开头的类写了样式，后在不同的li中换上不同的精灵图。

.local-nav{display:flex;height:64px;background-color:#fff;border-radius:8px;margin:3px4px;}.local-navli{flex:1;}.local-nava{display:flex;flex-direction:column;align-items:center;font-size:12px;}.local-navli[class^="local-nav-icon"]{width:32px;height:32px;margin-top:8px;background:url(../images/localnav_bg.png)no-repeat00;background-size:32pxauto;}.local-navli.local-nav-icon-icon2{background-position:0-32px;}.local-navli.local-nav-icon-icon3{background-position:0-64px;}.local-navli.local-nav-icon-icon4{background-position:0-96px;}.local-navli.local-nav-icon-icon5{background-position:0-128px;}

在双行中布局中，下面给出一个li的写法，其他li相同。

<ulclass="subnav-entry"><li><ahref="#"title="自由行"><spanclass="subnav-entry-icon1"></span><span>自由行</span></a></li>

CSS样式如下

.subnav-entry{display:flex;border-radius:8px;margin:0px4px;background-color:#fff;flex-wrap:wrap;}.subnav-entryli{flex:20%;}

这里是flex为20%，既可以让每5个排在一行，设置了换行。每行放不下就会自动换行

.subnav-entry a { display: flex; flex-direction: column; align-items: center;}

这里采用是以y为主轴，x轴为側轴对齐的方式。

.subnav-entry[class^="subnav-entry-icon"]{width:28px;height:28px;margin-top:4px;background:url(../images/subnav-bg.png)no-repeat;background-size:28pxauto;}.subnav-entry-icon2{background:url(../images/subnav-bg.png)no-repeat;background-size:28pxauto;}

上面的方法是比较容易理解和记忆的方式来做

总结

到此这篇关于Flex移动布局中单行和双行布局的区别及使用详解的文章就介绍到这了,更多相关Flex移动布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！