CSS3---Flex布局-容器属性

盒模型分类

盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式

场景：

在小程序开发中，需要考虑各种尺寸终端设备上的适配。
在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现。

比如下面常见的信息列表，要求内容高度不确定情况下，保持垂直居中:
这种情况下，建议用flex布局

在不固定高度信息的例子中，只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。

容器与项目元素

简称：
日常开发中，采用flex布局的元素，一般简称为“容器”
容器内的元素简称为“项目”或者“元素”

上面图片是container容器和item项目

主轴与交叉轴

在介绍各个属性之前，需要先明确一个坐标轴
水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

容器与项目元素

布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content。
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

概念：
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

flex不单是一个属性，还包含了一套新的属性集
属性集包括设置容器和项目两部分

容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse
③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse
④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

项目元素属性
①多余空间时元素放大比例flex-grow：0（默认值） |
②空间不足时元素缩小比例flex-shrink:1（默认值） |
③元素在主轴上占据空间flex-basis:auto（默认值） |
④flex 是grow、shrink 、basis的简写
⑤元素的排列顺序order:0（默认值） |
⑥单独对某个元素设置交叉轴对齐方式align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretc

flex-direction 属性

作用：设置项目排列方向
值：
①row（默认值）：主轴横向，项目沿主轴排列，从左到右排列

②row-reverse：row的反方向，从右到左排列

③column：主轴纵向，项目沿主轴排列，从上到下排列

④column-reverse：column的反方向，从下到上排列

flex-wrap 属性

作用：设置是否允许项目多行排列，以及多行排列时换行的方向
值：
①nowrap（默认值）：不换行。如果单行内容过多，则溢出容器
②wrap：容器单行容不下所有项目时，换行排列。
③wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向

flex-flow 属性

相当于direction和wrap的集合
flex-flow: row nowrap;/ 顺序排列且不换行 /
flex-flow:row-reverse wrap;/ 反序排列且自动换行 /

justify-content 属性

作用：设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
值：
①flex-start（默认值）：项目对齐主轴起点，项目间不留空隙

②center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离

③flex-end：项目对齐主轴终点，项目间不留空隙

④space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。

⑤space-around：与space-between相似。
不同点为，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。

⑥space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

align-items属性

作用：元素在交叉轴的对齐方式
值：
①stretch（默认值）：当未设置项目尺寸，项目拉伸至填满行高。
②flex-start：项目顶部与行起点对齐。
③center：项目在行中居中对齐。
④flex-end：项目底部与行终点对齐。
⑤baseline：项目的第一行文字的基线对齐，以子元素的第一行文字对齐。

align-content 属性

作用：多行元素在交叉轴的对齐方式
值：
①stretch（默认值）：当未设置项目尺寸，项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
②flex-start：首行在交叉轴起点开始排列，行间不留间距
③center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等
④flex-end：尾行在交叉轴终点开始排列，行间不留间距
⑤space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0
⑥space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半
⑦space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等

交叉轴上的多行对齐

通过flex-wrap: wrap使得元素在一行放不下时进行换行。
在这种场景下就会在交叉轴上出现多行，多行情况下，flex布局提供了align-content属性设置对齐。

重点：
align-content与align-items比较类似，同时也比较容易迷糊。下面会将两者对比着来看它们的异同。
首先明确一点：align-content会以多行作为整体进行对齐，容器必须开启换行。
对比：

区别：
在属性值上，align-content比align-items多了两个值：space-between和space-around。