您现在的位置是：网站首页> 编程资料编程资料

Flex移动布局中单行和双行布局的区别及使用详解

2021-09-03 821人已围观

简介这篇文章主要介绍了Flex移动布局中单行和双行布局的区别及使用，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

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相同。

                                                        自由行

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轴为

上一篇：CSS实现导航固定的、左右滑动的滚动条制作方法css实现隐藏滚动条并可以滚动内容的实例代码CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解CSS实现隐藏滚动条并可以滚动内容效果(三种方式)css滚动条样式修改的代码css3 实现滚动条美化效果的实例代码

下一篇：css 实现动态二级菜单使用HTML+CSS实现鼠标划过的二级菜单栏的示例纯CSS实现鼠标滑过显示子菜单的二级菜单效果HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单js+css实现圆角二级菜单jQuery CSS 完美兼容的二级菜单

您现在的位置是：网站首页> 编程资料编程资料

Flex移动布局中单行和双行布局的区别及使用详解

相关内容

点击排行

本栏推荐

猜你喜欢