CSS3 弹性盒子flex box（重要）

1.概念

• 弹性盒子是 CSS3 的一种新的布局模式 相对于普通盒子更为灵活性
• 能提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
• 弹性容器内包含了一个或多个弹性子元素

组成：

弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item) 组成

设置：

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器

两个基本概念：

容器：需要添加弹性布局的父元素

项目：容器的每一个子元素称为项目

两个基本方向：

主轴：规定水平或者垂直方向是主轴方向 默认是水平方向 --- 元素默认在主轴方向上排列

交叉轴：与主轴垂直的方向 默认垂直反向

注：设为flex布局后，子元素的float、clear、vertical-align属性将失效

2.容器属性

（1）flex-direction属性：决定主轴的方向（即项目的排列方向）

属性值	描述
row	默认值 主轴为水平方向 起点在左端
row-reverse	主轴为水平方向 起点在右端
column	主轴为垂直方向 起点在上沿
column-reverse	主轴为垂直方向 起点在下沿

（2）flex-wrap属性： 定义一条轴线排不下时是否换行

属性值	描述
nowrap	默认值  不换行
wrap	换行
wrap-reverse	换行 第一行在下方

（3）justify-content属性：定义了项目在主轴上的对齐方式

属性值	描述
flex-start	默认值  左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等（项目间的间隔比项目与边框的间隔大一倍 ）
space-evenly	两个项目之间的距离相等（每个项目左右边的空隙相等）

（4）align-items属性： 定义项目在交叉轴上如何对齐

属性值	描述
flex-start	项目靠着上沿位置  即交叉轴的起点对齐
flex-end	项目靠着下沿位置  即交叉轴的终点对齐
center	项目居中 即交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch	默认值     如果项目有高度 效果与flex-start一样                 如果项目没有高度/auto 项目的高度将会拉甚至容器的高度

（5）align-content属性：定义多根轴线（比如换行）的对齐方式

属性	描述
flex-start	靠着交叉轴的上沿位置
flex-end	靠着交叉轴的下沿位置
center	居中
space-between	两端对齐 轴线之间的间隔平均分布
space-around	项目上下两侧之间的间隙相等
stretch	默认值 轴线占满整个交叉轴 项目没有高度时才会占满整个交叉轴  有高度时将是高度大小

3.项目属性

（1）flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

•  所有项目都为1 所有项目一起平分容器剩余空间
•  某个项目为1 其余不设置默认为0 为1的项目分走容器剩余空间
•  某两个项目分为1.5 0.5  比例为3：1 所以设置为1.5项目就分走容器3/4剩余空间

（2）flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
• 负值对该属性无效

（3）align-self属性：定义项目自身在交叉轴上的排列方式

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
• 默认值为auto，表示继承父元素的align-items属性
• 如果没有父元素，则等同于stretch
• 该属性可能取6个值，除了auto，其他都与align-items属性完全一致

    align-self: baseline：

1. 如果主轴方向是水平方向，则基线对齐（至少两个项目设置baseline才看的出来效果）
2. 如果主轴方向是垂直方向，则与flex-start等效