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

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网页空间、营销软件、网站建设、会同网站维护、网站推广。

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

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


        
  •                               攻略景点                      
  •         
  •                               门票玩乐                      
  •         
  •                               美食林                      
  •         
  •                               周边游                      
  •         
  •                               一日游                      
  •     

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

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

    
            
  •                                               自由行                      
  • 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移动布局中单行和双行布局的区别有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    当前标题:Flex移动布局中单行和双行布局的区别有哪些
    网址分享:http://myzitong.com/article/jieijs.html