• 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 }

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

  • 相关阅读:
    VMware Workstation安装CentOs7固定ip地址
    使用阿里云oss
    使用Yapi展示你的api接口
    .net core使用MQTT
    CentOS 7服务器安装brook和bbr加速
    博客主题
    自定义控件
    winform数据绑定
    is as 运算符
    反射
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13173650.html
Copyright © 2020-2023  润新知