flex布局

1. flex布局体验

1.1 传统布局与flex布局

传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

flex弹性布局

• 操作方便，布局简单，移动端应用广泛
• pc端浏览器支持情况较差
• IE 11或更低的版本，不支持或仅部分支持

2.flex 布局父项常见属性

1. flex-direction：设置主轴的方向

   在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。
   默认主轴方向是x轴
   1.1 row 默认值，从左到右，x轴为主轴
   1.2 row-reverse 从右到左，翻转
   1.3 column 从上到下，y轴为主轴
   1.4 column-reverse 从下到上

2. justify -content 设置主轴上的子元素排列方式 ⭐
   使用这个属性之前一定要确定好主轴是那个
   2.1 flex-start 默认值，从头部开始，如果主轴是x轴，则从左到右
   2.2 flex-end 从尾部开始排列
   2.3 center 在主轴水平居中（如果主轴是y轴则水平剧中）
   2.4 space-around 平分剩余空间
   2.5 space-between 先两边贴边，在平分剩余空间（重要）

3. flex-wrap 设置子元素是否换行
   3.1 nowrap 默认值，不换行
   3.2 wrap 换行
   3.3 wrap-reverse 换行，颠倒顺序，第一行到下方

4. align-items 设置侧轴上子元素的排列方式（单行）
   该属性是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项的时候使用
   4.1 flex-start 从上到下
   4.2 flex-end 从下到上
   4.3 center 挤在一起剧中（垂直居中）
   4.4 stretch 默认值，拉伸，如果项目未设置高度或设为auto，将占满整个容器的高度。
   4.5 baseline: 项目的第一行文字的基线对齐。

5. align-content 设置侧轴上的子元素的排列方式（多行）
   设置项在侧轴（默认y轴）上的排列方式，在子项为多项的时候使用，也就是子项出现换行的时候使用
   5.1 flex-strat 在侧轴的头部开始排列
   5.2 flex-end 在侧轴的尾部开始排列
   5.3 center 在侧轴中见显示
   5.4 space-around 子项在侧轴平分剩余空间
   5.5 space-between 子项在侧轴先分布在两头，在平分剩余空间
   5.6 stretch 默认，设置子项元素高度平分父元素的高度

6. flex-flow 是flex-direction 和 flex-wrap 的复合属性
   直接写两个参数

3. flex布局子项常见属性

• flex子项目占的份数 flex：数量

• align-self 控制子项自己在侧轴的排列方式
  可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。

• order 属性定义子项的排列顺序（前后顺序） 默认0 属越小越靠前