flex布局

flex是什么

---

Flexible Box的缩写，意为”弹性布局”，给父级标签设置flex属性，控制子盒子的排列位置。一般用在移动端，因为pc端部分浏览器不兼容flex。

flex特性

---

• 根据浏览器大小自动伸缩flex容器里面子盒子的大小
• 默认x轴为主轴，y轴为侧轴
• 默认子盒子是单排排列，如果要改为多行需加 flex-wrap: wrap;

flex应用

---

flex父级属性

• display：flex;: 设置为弹性盒子

• flex-wrap：常用(warp/nowarp默认) 设置子元素是否换行

• flex-direction: 常用(row、colmn) 设置主轴方向​

• justify-content: 常用(

  center 居中、

  flex-start →排列、

  flex-end ←排列、

  space-around平分原有子盒子外剩余的空间宽度、

  space-between第一和第最后的子盒子先贴两边后，剩余的子盒子再平分原有空间宽度)

• align-items 和 align-content 都是上下调节，区别是align-items控制单行，align-content控制多行
  常用(

  center 居中、

  flex-start ↓排列、

  flex-end ↑排列、

  stretch 上下拉伸

  )

• flex-flow 复合属性direction(方向)和warp(是否换行)的组合（ flex-flow: column wrap; ）

  ​

  ​

flex子级属性

• flex: 0~1; 单个子盒子设置，最大容量是1
  

  ​

• flex：1以上； 多个盒子设置才有效果
  

  ​

• align-self: 常用(flex-start/end、center)

  在单行里设置单个子盒子的水平位置，如果父级设置了 flex-wrap: wrap;便不会生效

  ​

• order：-1 ：默认排序是0，数字越小排序越前