通过给父盒子设置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中有主轴与侧轴、元素是根据主轴来排列的 默认主轴是 row水平方向、 侧轴就是column 垂直方向 也可以设置列column 垂直方向 那侧轴就是row 水平方向
row 默认从左到右 row-reverse 右到左 column 从上到下 column-reverse 从下到上
flex-start 默认从头部开始、主轴是x轴、则从左到右、 flex-end 从尾部开始排列 center 主轴居中对齐(主轴是x则水平对齐) space-around 平分剩余空间 space-between 贴两边、在平分剩余空间
nowrap 默认、不换行 wrap 换行
flex-start 从上到下 flex-end 从下到上 center 挤在一起居中(垂直居中) stretch 拉伸
flex-start 默认侧轴头部开始排列 flex-end 侧轴尾部开始排列 center 侧轴中间显示 space-around 在侧轴平分剩余空间 space-between 侧轴贴两边、在平分剩余空间 stretch 子项元素高度平分父元素高度
//复合属性:水平方向 换行 flex-flow:row wrap;
flex 控制项目自己所占容器剩余空间份数 align-self 控制项目自己在侧轴上的排列方式 order 控制顺序
