flex弹性布局知识点汇总

今天用弹性布局做了一个项目！所以复习一下弹性布局的知识！

flex布局与传统布局的对比
1.传统布局 兼容性好 但是繁琐
2.弹性布局 操作方便 主要用于移动端

使用方式：给父元素 div 设置 dislplay:flex; 即可将其变为弹性布局

flex-direction 设置主轴的方向
flex-direction:row; row就是默认值 从左到右
flex-direction:row-reverse; 从右到左
flex-direction:column; 从上到下
flex-direciton:column-reverse;从下到上

justify-content 设置主轴上的子元素排列方式
justify-content:flex-start; 默认值 从开头开始排序
justify-content:flex-end; 从尾部开始排序
justify-content:center; 挤在一起居中
justify-content:space-around; 平分剩余空间
justify-content:space-between; 先两边再评分剩余空间

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

align-content 设置侧轴上的子元素的排列方式（多行）
align-content:flex-start; 在侧轴的头部开始排列
align-content:flex-end; 在侧轴的尾部开始排列
align-content:center; 在侧轴中间显示
align-content:space-around; 子项在侧轴平分剩余空间
align-content:space-between; 子项在侧轴 先分布在两头，再评分剩余空间
align-content:stretch; 设置子项元素高度评分父元素高度
align-items 设置侧轴上的子元素排列方式（单行行）
align-item:flex-start;
align-item:flex-eng;
align-item:center;
align-item:stretchl;

flex-flow 复合属性 相同于同时设置了flex-direction和flex-wrao
flex-flow:<‘flex-direction’> || <‘flex-wrap’>;

align-self 控制子项自己在侧轴上的排列方式
order 默认值都是0 谁的order值越小，谁就越靠前
flex 设置子项宽度占父元素宽度的比例

参考：相关知识点来自w3c.