flex布局

flex弹性布局 （高效 方便）

- 父盒子 display：flex；//父项

- 该盒子位置不影响
- 该盒子 浮动 正常生效
- 该盒子 定位 正常生效 （定位优先级最高）

- 控制主轴（默认x轴）子项对齐方式
- justify-content:
flex-start //左对齐
flex-end //右对齐
center //居中
space-around //环绕 每个子项 均分 剩余父项空间 （移动端底部导航栏会使用）
space-between //先放两侧 剩下子项平分空间
space-evenly //子项缝隙宽度一致 连同两侧空隙一致

• 控制侧轴（默认y轴）子项对齐方式

  • align-items:
    	flex-start
    	center
    	flex-end
    

• 控制主轴方向

  • flex-direction:
    		row		//设置主轴为x轴（默认）
    		column //设置主轴为y轴
    

• 换行
  • 父项默认不会换行 会挤压盒子
  • 添加代码flex-wrap：wrap
• 文字也是一种元素 也可以作为子项进行控制
• 盒子可以作为父项也可以作为子项 （flex嵌套）

- 子盒子 //子项

• 子盒子可以直接设置宽高 （ 块级 行内 行内块概念不存在）
• 子盒子 浮动 没有效果
• 子盒子 定位 正常生效 （定位优先级最高）
• 子盒子 margin 生效 （但 很少添加margin）
• 子盒子 transform 生效 （但 很少使用transform）
• 默认情况：（原因：弹性盒子默认水平排列）
  • 宽度变成内容撑开
  • 高度变成父项的高度
• flex：1； 设置子项 占父项剩余宽度的比例