弹性盒布局

弹性盒子是CSS3的一种新的布局方式。
引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空间。

设置弹性盒子

.box {
    display:flex;//块级元素
    display：inline-flex;//行内元素
}

注意：设置Flex布局以后，子元素的float、clear和vertical-align属性将失效

• 特点

1. 子元素默认横向布局，此时默认横轴为主轴，纵轴叫做交叉轴。
2. 子元素默认继承父元素高度。
3. 子元素宽度默认由内容撑开。
4. 子元素的宽度总和大于父元素的宽度，子元素自动收缩。

弹性盒子属性

flex-direction：（设置主轴的方向，他有以下四个值）

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直轴，起点在下沿。

justify-content：（设置主轴对齐方式，他有以下五个取值）

具体对齐方式与主轴方向有关有关，下面假设主轴从左到右

• flex-start（默认值）：左对齐。
• flex-end：右对齐。
• center：居中对齐。
• space-between（常用）：两端对齐，项目之间的间距都相等。
• space-around：每个项目两侧的间距都相等。所以，项目之间的间隔比项目与边框的距离大一倍。

align-items：（设置项目在交叉轴上的对齐方式，他有以下五个取值）

具体对齐方式与交叉方向有关有关，下面假设交叉轴从上到下

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center ：交叉轴终点对齐。
• baseline：项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或者宽度设为atuo，将占满整个容器。

项目的属性

order
order属性用整数值来定义排列顺序。数值越小，排列越靠前，默认为0，可以为负值。

align-item：（设置或检索弹性盒子元素在纵轴方向的对齐方式）
取值参考弹性盒子align-item值。

flex：
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex-shrink: 0;禁止子元素缩放
flex-wrap: wrap; 让弹性盒元素在必要的时候拆行：
详情参考这里