flex(伸缩)布局：

flex(伸缩)布局：

flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

1、适用范围：

任意一种元素都可指定为flex布局

.wrap{
display : flex;
}

包括行内元素：

.box{
 display : inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

2、基本概念

容器：采用flex布局的元素被称为容器

项目：在flex布局中的子元素被称作项目

父级元素如果采用flex布局，即父级元素为容器，所有子元素自动成为项目

flex容器内存在水平主轴main axis与垂直交叉轴cross axis，容器内的项目则沿主轴排列

每个项目占据的水平空间叫做main size 占据的垂直空间叫做cross size

3、容器的一些属性

flex-direction：设置容器主轴方向

row（默认值，水平方向，由左至右） row-reverse（沿水平方向，从右至左） column（沿垂直方向，由上至下） column-reverse（沿垂直方向，由下到上）

flex-wrap：设置当项目在容器中一行无法显示的时候如何处理

nowrap（表示不换行，但是项目的宽度会失效，全都被显示在一行）

wrap（正常换行，第一个是第一行第一个）

wrap-reverse（向上换行，第一个位于最低行第一个）

flew-flow：是上面两个属性的简写，默认值[row nowrap]分别是前两个属性的属性值

justify-content：设置项目在容器中水平方向的对齐方式

flex-start（左对齐） flex-end（右对齐） center（居中对齐） space-between（两端 对齐） space-around（每个项目两侧的间距相等）

align-items：设置项目在容器中垂直方向上的对齐方式

flex-start（左对齐） flex-end（右对齐） center（居中对齐） baseline （项目的第一行文字的基线对齐） stretch（默认值，若未设置高度或高度为auto，将占满整个容器的高度）

align-content：定义了多根轴的对齐方式，若项目只有一根轴，该属性则不起作用

flex-start（与交叉轴的起点对齐） flex-end（与交叉轴的终点对齐） center（与交叉轴的中点对齐） space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）

space-around（每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍） stretch（默认值，轴线占满整个交叉轴）

4、项目的一些属性

order属性

设置项目的排序位置，默认值为0，数值越小越靠前

flex-grow属性

设置当前项目放大显示，默认值为0，表示不放大，如果设置为1，表示分摊后放大显示

flex-shrink属性

表示项目的缩小比例，默认为1，表示如果空间不足则所有项目同比缩小，若设置为0，则空间不足时该项目也不缩小。

flex-basis属性

用来设置当前项目占据主轴空间的值，默认为auto，表示项目当前默认的大小，如果设置为一个固定值时，则当前项目在容器中占据固定大小的空间。

flex属性

是flex-grow、flex-shrink、flex-basis三个属性的简写，默认值为：0 1 auto

align-self属性

可以设置当前项目拥有和其他项目不同的对齐方式，默认为auto。它有6个可能的值

auto（和父元素align-self的值一致）

flex-start（顶端对齐）

flex-end（底部对齐）

center（竖直方向上居中对齐）

baseline（item第一行文字的底部对齐）

stretch（当item未设置高度时，item将和容器等高对齐）