今天看了一下天猫移动端的首页，发现天猫用的是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;}
}
}
网友评论