Flex弹性布局

通过给父盒子设置flex属性、来控制子盒子的位置和排列的方式

任何容器都可以指定为flex布局
为父盒子设置了之后、子元素的float、clear和vertical-align属性将失效
设为flex布局的元素、为flexcentainer容器、它的子元素称为flex项目
flex项目也可以继续设置为flex容器

常见的父项的属性：

flex-direction:设置主轴的方向；
justify-content:设置主轴上的子元素排列方式
flex-warp:设置子元素是否换行
align-items:设置侧轴上的子元素的排列方式(单行)
align-content:设置侧轴上的子元素的排列方式(多行)
flex-flow:复合属性、同时设置了主轴方向(flex-direction)与是否换行(flex-warp)

flex-direction:主轴方向

flex中有主轴与侧轴、元素是根据主轴来排列的
默认主轴是 row水平方向、 侧轴就是column 垂直方向
也可以设置列column 垂直方向 那侧轴就是row 水平方向

flex-direction属性：

row 默认从左到右
row-reverse 右到左
column 从上到下
column-reverse 从下到上

justify-content:设置主轴上的子元素排列方式

flex-start 默认从头部开始、主轴是x轴、则从左到右、
flex-end 从尾部开始排列
center 主轴居中对齐(主轴是x则水平对齐)
space-around 平分剩余空间
space-between 贴两边、在平分剩余空间

flex-wrap:设置子元素是否换行

nowrap 默认、不换行
wrap 换行

align-items 设置侧轴上子元素的排列方式(单行)

flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸

align-content 设置侧轴上子元素的排列方式(多行)

flex-start 默认侧轴头部开始排列
flex-end 侧轴尾部开始排列
center 侧轴中间显示
space-around 在侧轴平分剩余空间
space-between 侧轴贴两边、在平分剩余空间
stretch 子项元素高度平分父元素高度

flex-flow 属性:主轴方向与是否换行的复合属性

//复合属性:水平方向 换行
flex-flow:row wrap;

item子项属性

flex 控制项目自己所占容器剩余空间份数
align-self 控制项目自己在侧轴上的排列方式
order 控制顺序