一、 弹性布局
在平时的我们常用的布局类型有以下几种：
1.浮动+定位
2.自适应（百分比）
3.响应式布局
4.弹性布局（Flex布局）
今天所要整理的就是比较常用的弹性布局，但块标签与行内块标签是有区别的。
{:;
}
input{
:;
}当然不是所有的东西都能像钱一样让所有人都喜欢，它也有自己的优缺点。
优点：兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit-)，可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局。
缺点：因为弹性布局可调节，所以有巨大的可能性，需要花很多的时间进行调整；有些弹性设计要为IE6单独设计样式，不过……IE6还有多少人在用(⊙﹏⊙)b。
注意：当我们使用了弹性布局，那么在CSS里的float、clear和vertical-align就会失效。
二、 弹性布局的属性
首先是作为弹性布局的容器的属性。
1.flex-direction属性
flex-direction决定了容器的方向。
div {
flex-direction: row | row-reverse | column | column-reverse;
}四个值分别为：row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。
2.flex-wrap属性
默认情况下的布局一般在同一行，当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。
div{
flex-wrap: nowrap | wrap | wrap-reverse;
}四个值分别为：nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。
3.flex-flow属性
flex-flow属性是以上两种属性的简写形式，默认值是row nowrap。
div {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content属性
justify-content属性定义了在容器方向上的对齐方式。
div {
justify-content: flex-start | flex-end | center | space-between | space-around;
} flex-start(默认值)：向左对齐。
flex-end：向右对齐。
center： 居中对齐。
space-between：两端对齐，每一个子元素等距离间隔，子元素与容器边框无间隔。
space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。
5.align-items属性
align-items属性定义在垂直容器方向上的对齐方式。
div {
align-items: flex-start | flex-end | center | baseline | stretch;
} flex-start：垂直方向的起点对齐。
flex-end：垂直方向的终点对齐。
center：垂直方向的中点对齐。
baseline: 与第一个子元素中文字的基线对齐。
stretch(默认值)：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度。
6.align-content属性
align-content属性定义了子元素两种方向上的对齐方式。
div {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
} flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。
flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。
center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。
space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。
space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：占满整个垂直方向。
下面就是具有弹性布局容器中子元素的属性
1.order属性
order属性定义了子元素的排列顺序，数值小的在前。
.son {
order: <integer>;
}
2.flex-grow属性
flex-grow属性定义了子元素的放大比例，默认值为0。
.son {
flex-grow: <number>; /* default 0 */}当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。
3.flex-shrink属性
flex-shrink属性定义了子元素的缩小比例，默认值为1。
.son {
flex-shrink: <number>; /* default 1 */}给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。
4.flex-basis属性
该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。
5.flex属性
该属性为flex-grow, flex-shrink 和 flex-basis的简写。
6.align-self属性
该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。
.son {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}auto：默认值，表示默认继承父级的align-items属性。
flex-start：垂直方向的起点对齐。
flex-end：垂直方向的终点对齐。
center：垂直方向的中点对齐。
baseline: 与第一个子元素中文字的基线对齐。
stretch(默认值)：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度。
flex布局（弹性布局）
1.容器具备的属性有： flex-dirction:(决定主轴的方向)（即项目排列方向） 取值:row/row-reverse/column/column-reverse/ flex-wrap:（如果一条轴线排不了，如何换行） 取值：nowrap（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 flex-flow :（flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap） justify-content:(justify-content属性定义了项目在主轴上的对齐方式。) 取值：flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 align-items (交叉轴上如何对齐) 取值:flex-start/flex-end/center/baseline/stretch align-content(定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用) 取值： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 2.项目的属性： order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大 小。 flex align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属 性，如果没有父元素，则等同于stretch。
以上是弹性布局（Flex布局）的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
