Flex移动布局中单行和双行布局的区别有哪些

小编给大家分享一下Flex移动布局中单行和双行布局的区别有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

<ul class="local-nav">         <li>             <a href="#">                 <span class="local-nav-icon-icon1"></span> 攻略景点             </a>         </li>         <li>             <a href="#">                 <span class="local-nav-icon-icon2"></span> 门票玩乐             </a>         </li>         <li>             <a href="#">                 <span class="local-nav-icon-icon3"></span> 美食林             </a>         </li>         <li>             <a href="#">                 <span class="local-nav-icon-icon4"></span> 周边游             </a>         </li>         <li>             <a href="#">                 <span class="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: 3px 4px; } .local-nav li {     flex: 1; } .local-nav a {     display: flex;     flex-direction: column;     align-items: center;     font-size: 12px; } .local-nav li [class^="local-nav-icon"] {     width: 32px;     height: 32px;     margin-top: 8px;     background: url(../images/localnav_bg.png) no-repeat 0 0;     background-size: 32px auto; } .local-nav li .local-nav-icon-icon2 {     background-position: 0 -32px; } .local-nav li .local-nav-icon-icon3 {     background-position: 0 -64px; } .local-nav li .local-nav-icon-icon4 {     background-position: 0 -96px; } .local-nav li .local-nav-icon-icon5 {     background-position: 0 -128px; }

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

<ul class="subnav-entry">         <li>             <a href="#" title="自由行">                 <span class="subnav-entry-icon1"></span>                 <span>自由行</span>             </a>         </li>

CSS样式如下

.subnav-entry {     display: flex;     border-radius: 8px;     margin: 0px 4px;     background-color: #fff;     flex-wrap: wrap; } .subnav-entry li {     /* flex: 1; */     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: 28px auto; } .subnav-entry-icon2 {     background: url(../images/subnav-bg.png) no-repeat;     background-size: 28px auto; }

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

看完了这篇文章，相信你对“Flex移动布局中单行和双行布局的区别有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！