zoukankan      html  css  js  c++  java
  • 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 }

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

  • 相关阅读:
    4 Apr 18 软件开发目录 logging模块的使用 序列化(Json, Pickle) os模块
    3 Apr 18 内置函数 列表生成式与生成器表达式 模块的使用之import 模块的使用之from…import…
    2 Apr 18 三元表达式 函数递归 匿名函数 内置函数
    30 Mar 18 迭代器 生成器 面向过程的编程
    29 Mar 18 函数 有参、无参装饰器
    28 Mar 18 函数
    27 Mar 18 函数的参数
    26 Mar 18 函数介绍
    23 Mar 18 文件处理
    22 Mar 18 补充数据类型+字符编码+文件处理
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13173650.html
Copyright © 2011-2022 走看看