2019-1-4

flex笔记

flex弹性布局IE11或者更低版本不支持，pc端浏览器支持情况差
flex布局原理
任何一个容器都可以指定为flex布局，通过给父盒子添加flex属性来控制子盒子的位置和排列方式
flex布局父项常见属性
1.flex-direction 设置主轴的方向，默认的主轴方向是子盒子按照x轴的方向排列
值 排列方向
row 子盒子沿 x轴左右排列
column 子盒子 沿y轴上下排列
2.justify-content 设置主轴上子盒子的排列方式
值 排列方式
flex-start 默认值，从头部开始排列
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 每个盒子平分剩余空间
space-between 先两边贴边，再平分剩余空间
3.flex-wrap 设置子元素是否换行，
nowrap 默认值，不换行，盒子放不下，会改变盒子宽度
warp 换行
4.align-items 设置侧轴上子元素排列方式（只有子项只有子项为单项的时候使用）
flex-start 从上到下
flex-end 从下到上
center 垂直居中
stretch 如子盒子无高度，子盒子为父盒子高度
5.align-content 在多行情况下设置侧轴子元素的排列方式
flex-start
flex-end
center
space-around
space-between
stretch
6.flex-flow 是flex-direction和flex-wrap属性的复合属性
flex布局子项常见属性
flex属性定义子项分配剩余空间，用flex来表示占多少份数
align-self 控制子项自己在 侧轴上的排列方式，允许单个项目与其它项目不一样的对齐方式，可覆盖align-items属性