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


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

    <ul class="local-nav">
            <li>
                <href="#">
                    <span class="local-nav-icon-icon1"></span> 攻略景点
                </a>
            </li>
            <li>
                <href="#">
                    <span class="local-nav-icon-icon2"></span> 门票玩乐
                </a>
            </li>
            <li>
                <href="#">
                    <span class="local-nav-icon-icon3"></span> 美食林
                </a>
            </li>
            <li>
                <href="#">
                    <span class="local-nav-icon-icon4"></span> 周边游
                </a>
            </li>
            <li>
                <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"] {
         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>
                <href="#" title="自由行">
                    <span class="subnav-entry-icon1"></span>
                    <span>自由行</span>
                </a>
            </li>

    CSS样式如下

     1 .subnav-entry {
     2     display: flex;
     3     border-radius: 8px;
     4     margin: 0px 4px;
     5     background-color: #fff;
     6     flex-wrap: wrap;
     7 }
     8 
     9 .subnav-entry li {
    10     /* flex: 1; */
    11     flex: 20%;
    12 }

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

    1 .subnav-entry a {
    2     display: flex;
    3     flex-direction: column;
    4     align-items: center;
    5 }

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

     1 .subnav-entry [class^="subnav-entry-icon"] {
     2      28px;
     3     height: 28px;
     4     margin-top: 4px;
     5     background: url(../images/subnav-bg.png) no-repeat;
     6     background-size: 28px auto;
     7 }
     8 
     9 .subnav-entry-icon2 {
    10     background: url(../images/subnav-bg.png) no-repeat;
    11     background-size: 28px auto;
    12 }

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

  • 相关阅读:
    MyEclipse 8.5 M1注册码(转)
    非常经典有深度的电影英文台词(转)
    pb函数库 DataWindow常用函数(转)
    35岁以前把下面十件事做好(转)
    相识如茶,相思似酒(转)
    常用的SQL 脚本
    SQL Server Mobile 数据类型
    人生的35个好习惯 给人生的25条建议(转)
    sybase数据库相关
    模板
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13173650.html
Copyright © 2020-2023  润新知