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

【前言】2019年9月9日

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

PC端–传统开发–IE盒模型，标准盒模型


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

display设置盒模型
justify-content盒模型水平方向对齐方式

日常开发中，采用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
①弹性盒模型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 项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。

space-around 第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。

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

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

⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） 当未设置项目尺寸，项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
flex-start 首行在交叉轴起点开始排列，行间不留间距
center 行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等

flex-end 尾行在交叉轴终点开始排列，行间不留间距
space-between 行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0
space-around

space-evenly 行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等

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

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