关于html5弹性布局(1)

布局在开发中，很重要。布局的作用在于设计，如果设计得巧妙，布局得足够好，我们设计的UI结构将显得非常和谐和美丽。在该篇文字中，主要讲解弹性布局，当然附带地说说响应式布局。响应式布局，我在前文讲过，在适配的第二点，我具体讲解了媒介查询方式，事实上媒介查询的方式具体应用的地方就是响应式布局。我们这么理解:查询到不同的平台或者设备，去使用不同的ui,从而实现了不同的布局响应。这就是响应式布局。今天要讲的是弹性布局，自然和上文提及的适配第三点rem布局相关。

言归正传。弹性布局到底是什么。具体来说，就是我们的样式布局中，需要使用flex。传统的方式都是基于盒装模型的，我们可以看到大量使用到display+position+float属性，但是当我们设计比较特殊的布局，例如垂直居中不易实现。Flex布局则是新的一种布局方式，得到所有浏览器的支持，我们可以非常安全地使用该项。

Flex是flexible box的缩写，也就是“弹性布局”，可以给盒装类型提供最大的支持度和灵活度以及控制度。任何一个容易都可以制定为flex布局。 需要注意的是，设置为flex布局之后，子元素的float,clear,vertical-align全部失效。可见float这个很重要的用法，在flex设置之后，失效了！

元素使用了flex布局，可以称为容器。那么他的所有的子元素将自动成为这个父容器的成员了。   现截图如下：

现在来开始介绍容器的属性。

1flex-direction

设定主轴的方向，一共可以设置四个值，分别是row,row-reverse,column,column-reverse

即使我们不设置，这个也是有默认值的，他就是row

Row：主轴水平方向，起点左端。

Row-reverse：主轴水平方向，起点右端

Column:主轴垂直方向，起点在上端

Columm:主轴垂直方向，起点在下端

2flex-wrap

这个属性可以设定，在一条轴线上面，是否需要换行，以及如何换行

一共可以设定的值有三个

nowrap,wrap,wrap-reverse

即使我们不设置，这个也是有默认值的，他就是nowrap

Nowrap:不换行

Wrap:换行，第一行在上方

Wrap-reverse:换行，第一行在下方

3flex-flow

这个属性是flex-direction和flex-wrap的属性的简称，默认值就是row nowrap

4justify-content

这个属性设定了主轴上面的对齐方式，具体可以设置五个值，分别如下

默认值是flex-start

Flex-start:左对齐

Flex-end:右对齐

Center:居中

Space-between:两端对齐

Space-around:每个子容器的两侧的间隔是相等的，所以子容器之间的间隔比外框的间隔大一倍

5align-items

这个属性可以设定容器在交叉轴上面的对齐方式，他可以设定五个值，默认值就是

Stretch方式

Stretch:如果子容器不设定高度或者设置为auto,占据整个容器的高度

Flex-start:交叉轴的起点对齐

Flex-end:交叉轴的终点对齐

Center:交叉轴的中点对齐

Baseline:容器的第一行文字的基线对齐

6align-content

这个属性定义了存在多个轴线下的对齐方式，在仅有一根轴线的情况下，这个属性将不取作用。这个属性可能取到的6个值，默认是stretch方式。他们分别是：

Stretch:轴线占满整个交叉轴

flex-start:与交叉轴的起点对齐

    flex-end：与交叉轴的终点对齐

center:与交叉轴的中点对齐

space-between:与交叉轴两端对齐，轴线之间的间隔平均水平

space-around:每根轴线的两侧的间距相等，所以轴线之间的间隔比外框大一倍。

接下来介绍子容器的属性。这些属性包括

Order,flex-grow,flex-shrink,flex-basis,flex,align-self

Order设定了子容器的排列顺序，数值越小，越靠前，默认是0

Flex-grow设定了子容器的放大比例默认为0

Flex-shrink设定了子容器的缩小比例，默认为1，无法指定负值

Flex-basis设定了分配多余空间之前，子容器占据的主轴空间

Flex属性是flex-grow,flex-shrink,flex-basis的简称，默认值是0  1 auto。

优先使用这个属性，不建议写三个分离的属性，浏览器会推荐相关的值。

Align-self这个属性允许某单个的子容器和其他的子容器具备不同的对齐方式。