布局在开发中，很重要。布局的作用在于设计，如果设计得巧妙，布局得足够好，我们设计的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这个属性允许某单个的子容器和其他的子容器具备不同的对齐方式。
网友评论