微信小程序（Flex布局-容器属性）&&（Flex布局-项目属性）

盒模型分类

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

容器与项目元素

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

布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
概念：
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

容器属性

①弹性盒模型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| stretch

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

主轴与交叉轴

水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

容器属性

flex-direction 属性

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

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

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

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

flex-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

作用：元素在交叉轴的对齐方式
值：

容器属性align-content

作用：多行元素在交叉轴的对齐方式

交叉轴上的多行对齐

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

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

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

项目属性

项目属性：
设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。

项目元素属性集合：
order、flex-grow、flex-shrink、flex-basis、flex、align-self

项目属性：
①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>
②项目的收缩因子flex-shrink: 1（默认值） |
③项目的扩张因子flex-grow: 0（默认值） |
④项目width属性替代品flex-basis: auto（默认值） | px
⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性
⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch

项目属性order

作用：
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。

flex-shrink属性

作用：
时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数
未设置flex-shrink时，默认flex-shrink值为1

扩张因子flex-grow: 0（默认值） |

场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。

取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。

项目属性flex-basis

flex-basis属性
当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

项目属性flex

本质：
flex-grow，flex-shrink，flex-basis的简写方式。
值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

项目属性align-self

align-self属性
设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，可以对项目的对齐方式做特殊处理。
默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch