天猫移动端的布局方案

今天看了一下天猫移动端的首页,发现天猫用的是flex布局。所以特地又整理了一下flex布局的知识点。

Flex布局是W3C在2009年提出来的,可以简便,完整,响应式的实现各种页面布局。目前已经得到了所有浏览器的支持。包括IE10+,safari6.1+,FireFox22+,Chrome21+

Flex叫做弹性盒子布局。用来为盒装模型布局提供最大的灵活性。

任何一个容器都可以被指定为flex布局

    .box{
        display:flex;
    }

行内元素也可以使用flex布局

    .box{
        display:inline-flex;
    }

Webkit内核的浏览器,必须加上-webkit前缀

    .box{
        display:-webkit-flex;
        display:flex;
    }

设为flex布局后,子元素的float,clear,vertical-align属性将失效

容器

对于容器而言,即display被设置为flex的盒子来说。
我们可以用以下几个属性来控制。

flex-direction

这个属性决定主轴的方向,即容器内部的子元素的排布方向。在这里明确什么叫交叉轴。如果主轴横向,那么交叉轴就是纵向。反之亦然。

    .box{
        flex-direction:row | row-reverse | column | column-reverse;
    }

其中row是默认值,即不设定这个属性的话,默认是纵向排列的。

flex-wrap

这个属性表示在一条轴线上排不开了,应该怎么换行

    .box{
        flex-wrap:nowrap | wrap | wrap-reverse;
    }

其中nowrap表示不换行,这个是默认值
wrap表示换行,且第一行在上方
wrap-reverse表示换行,且第一行在下方

flex-flow

这个属性是以上两个属性的简写形式,即flex-direction和flex-wrap的简写形式
默认值为row nowrap

justify-content

这个属性表示了子元素在主轴上的对其方式

    .box{
        justify-content:flex-start | flex-end | center | space-between | space-around;
    }

flex-start左对齐,这个是默认值
flex-end右对齐
center 居中
space-between 两端对齐,子元素之间的间距相等
space-around 每个子元素两侧的间隔相等,所以,子元素之间的间隔比项目与边框的间隔大一倍

align-items

这个属性表示子元素在交叉轴上如何对齐

    .box{
        align-items:flex-start | flex-end | center | baseline | stretch;
    }

flex-start表示交叉轴起点对齐
flex-end表示交叉轴终点对齐
center 表示交叉轴的中点对齐
baseline 表示子元素的第一行文字的基线对齐
stretch 如果项目未设置高度或者auto,那么将占满整个容器的高度,这个是默认值

align-content

这个属性定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用。这就相当于所有子元素的整体相对于容器的位置。

    .box{
        align-content:flex-start | flex-end | center | space-between | space-around | stretch;
    }

flex-start表示与交叉轴的起点对齐
flex-end与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等,所以轴线之间的间隔比轴线与边框的间隔大一倍
stretch (默认值)轴线占满整个交叉轴

子元素的属性

order

这个属性表示子元素的排列顺序,数值越小,排列越靠前,默认值为0

    .item{
        order:<integer>;
    }

flex-grow

这个属性定义子元素的放大比例,默认为0.即存在剩余空间,也不放大。

    .item{
        flex-grow:<number>;
    }

当所有子元素的flew-grow属性为1,则它们等分剩余空间。如果一个子元素的flex-frow为2,其他子元素都为1,那么前者占据的剩余空间将比其他项多一倍。

flex-shrink

这个属性定义了子元素的缩小比例。默认值为1.即,空间不足的时候,该项目将缩小。

    .item{
        flex-shrink:<number>;
    }

如果所有的子元素的flex-shrink属性都为1,那么当空间不足的时候,都将等比例缩小。如果一个子元素的flex-shrink属性为0,其他项目为1,那么当空间不足时,前者不缩小。

flex-basis

这个属性表示在分配多余空间之前,子元素占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素的本来大小。

    .item{
        flex-basis:<length> | auto;
    }

它可以设置的和width,height属性一样的值,则项目将占据固定空间。

flex

这个属性是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷属性 auto(1 1 auto) 和 none(0 0 auto)
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

align-self

这个属性允许单个子元素可以和其他子元素有不一样的对齐方式,可以覆盖align-item属性。默认值为auto,表示继承容器的align-item的值、如果没有父元素,等同于stretch

    .item{
        align-self:auto | flex-start | flex-end | center | baseline | stretch;
    }

每个值表示什么,参照align-item


以上介绍完了理论知识,下面看天猫移动端首页的一个模块吧。
我们将介绍下图所示模块的实现

天猫的模块

HTML的代码如下

<div class="module-con topNav">
    <ul class="mui-flex">
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
                <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
                <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
                <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
             <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
               <span>我是文字</span>
            </a>
        </li>
    </ul>
</div>

sass的代码如下
关于sass的介绍,我之前的文章有提及,sass传送门

.mui-flex{display: flex;}
.topNav li{
    flex:auto;
    a{
        display:block; margin:4px; padding: 4px; text-align:      center;
        img{
            display:block; margin:0 auto 5px;
        }
    span{
         display:block;width: 100%; line-height: 20px;     text-align: center;}
    }
}

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,820评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 3,199评论 0 26
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 4,237评论 0 9
  • 一、Flex布局是什么 Flex是Flexible Box的缩写,用来为盒装模型提供最大的灵活性。 任何一个容器都...
    周花花啊阅读 536评论 0 9
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,175评论 0 1
  • 这本书是《舌尖上的中国》总导演陈晓卿所著,给我的感觉是“轻拢慢捻抹复挑,饮食生活各半边”。我在公务员面试培训班里,...
    王小肥皂阅读 242评论 0 0
  • 宁密康
    万菊香阅读 89评论 0 0
  • 一、没有泛型之前 在没有泛型之前,我们是怎么处理不同类型的相同操作的: 可以看得出我们的代码大部分是重复的,而作为...
    52718阅读 7,472评论 2 14
  • 有时 会被无力感包围 陷入情绪的洪流中 有时 会突然觉得无助 人海漂流没有归处 有时 会想起爱笑的你 缘起缘灭聚散...
    IslandBao阅读 52评论 4 2