移动端flex布局中单行和双行效果如何操作

发布时间：2023-12-27 23:31:45 所属栏目：语言来源：DaWei

导读： 这篇文章给大家分享的是移动端flex布局中单行和双行效果的实现。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

这里

这篇文章给大家分享的是移动端flex布局中单行和双行效果的实现。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

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

<ul class="local-nav">
<li>
<a href="#">
 攻略景点
</a>
</li>
<li>
<a href="#">
 门票玩乐
</a>
</li>
<li>
<a href="#">
 美食林
</a>
</li>
<li>
<a href="#">
 周边游
</a>
</li>
<li>
<a href="#">
 一日游
</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="自由行">

自由行
</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布局中单行和双行效果的实现，本文只是提供了一种实现思路，代码仅供参考，希望对大家学习CSS的使用有帮助。

（编辑：江门站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!