flex知识点

传统布局与flex布局

传统布局

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

flex弹性布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况差
• ie11或更低版本，不支持或仅部分支持
  建议：如果是pc端，我们还是用传统布局，如果是移动端或者不考虑兼容性问题的PC端页面布局，我们可以使用flex布局。

flex布局原理

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
flex意为弹性布局，任何一个容器都可以指定为flex布局
当我们为父元素设为flex布局后，子元素的float ，clear，vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=flex布局
采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员。

flex布局父项常见属性

• flex-direction：设置主轴的方向
  默认主轴方向就是x轴方向，水平向右
  默认测轴方向就是y轴方向，水平向下
  主轴，侧轴可以互换的。
  属性值：
  row：默认从左到右
  row-reverse：从右到左
  column：从上倒下
  column-reverse：从下到上
• justify-content:设置主轴上的子元素排列方式
  设置主轴上的子元素对齐方式
  center：在主轴上居中对齐（如果主轴是x轴，水平居中）
  space-around:平分剩余空间
  space-between:先两边贴边，再平分剩余空间
  flex-start：从头部开始，从左到右
• flex-wrap：设置子元素是否换行
  flex布局中默认是不换行的，
  nowrap：不换行
  wrap：换行
• align-content：设置测轴上的子元素的排列方式（多行）
  设置子项在侧轴上的排列方式并且知恩感用于子项出现换行的情况，在单行下是没有效果的。
• align-item:设置测轴上的子元素排列方式（单行）
  stretch：拉伸（默认值）
  center：垂直居中
  flex-start：从上倒下
  flex-end：从下到上
• flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性

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

---

em与 rem 区别