flex布局

布局原理

采用flex布局的元素，称为flex容器，简称容器。它的所有子元素自动成为容器成员，成为flex项目，简称项目

常见父项属性

1. flex-direction 设置主轴方向
   • 默认主轴方向是x轴方向，水平向右
   • 默认侧轴方向是y轴方向，水平向下
   • row 默认值，从左到右
   • row-reverse 从右向左
   • column 侧轴 从上到下
   • column-reverse 从下到上
2. justify-content 设置主轴尚的子元素排列方式
   • flex-start 属性值从头部开始，如果主轴是x轴，从左到右
   • flex-end 从尾部开始排列
   • center：在主轴居中对齐（如果主轴是x轴则水平居中）
   • space-around 平分剩余空间
   • space-between 先两边贴边 再平分剩余空间（重要）
3. flex-wrap 设置子元素是否换行
   • nowrap：默认子元素不换行，如果装不开，会缩小子元素的宽度，放到父盒子里
   • wrap：换行
4. align-content 设置侧轴上的子元素的排列方式（多行） 子项出现换行的情况
   • flex-start 默认值在侧轴的头部开始排列
   • flex-end 在侧轴的尾部开始排列
   • center 在侧轴中间显示
   • space-around 子项在侧轴平分剩余空间
   • space-between 子项在侧轴先分布在两头，再平分剩余空间
   • strench 设置子项元素高度平分父元素高度
5. align-items 设置侧轴上的子元素的排列方式（单行）
   • flex-start 默认值，从上到下
   • flex-end 从下到上
   • center 垂直居中
   • stretch 拉伸 子元素不要给高度
6. flex-flow 符合属性，相对于同时设置了flex-direction和flex-wrap

子项常见属性

1. flex子项目占的份数
   • 定义子项目分配剩余空间，用flex表示占多少份数
2. align-self控制子项自己在侧轴的排列方式
3. order属性定义子项的排列顺序（前后顺序）