在移动端适配，移动端开发中，或 APP 组件，页面栏目 or 小范围板块布局中常用的 flex 布局。
flex 布局
是什么？
自适应弹性布局
- 自动判断布局空间，修改自身尺寸
- 多个 box 在多个方向进行对齐&分布
什么时候用？适用于什么场景？
- 布局内部需要自适应
- 布局内部需要多个方向排列对齐
应用于：
- 移动端适配，移动端开发
- APP 组件，页面栏目 or 小范围板块布局
基础概念
布局结构
双层结构：外层容器
flex-container,激活弹性机制。
内层flex-item自动获得相关特性。flex-container外部和flex-item内部元素不受影响。flex 机制
任何一个容器都可以指定为 flex 布局，其内部第一层级的子项自动变为 flex 项目
`display:flex` 块状flex容器 `display:inline-flex`行间flex容器一旦激活 flex 机制，子项的
float、clear和vertical-align属性失效区域轴向
主轴 & 交叉轴，flex 容器的两端为轴的起点和终点
flex 属性
flex-container6 个属性，flex-item6 个属性
外围容器相关属性：1）对子项的排列和对齐 2）文档流入盒子的方向
flex-direction：定义主轴和交叉轴的方向flex-wrap：换行nowrap：往往对应自适应，外围容器固定，item 自动变化flex-flow：文档流flex-direction+flex-wrap缩写justify-content：主轴对齐（左中右，留白环绕，留白中间）align-items：交叉轴对齐align-content：交叉轴多行的对齐方式（容器若只有一行，则无效，避免与align-items发生冲突）
那么问题来了：水平垂直居中的一个方式，就可以用flex布局实现
子项相关属性：子项的自适应伸缩及分配
flex-grow：扩展比例，分配的是剩余的空间（wrap），默认 0 不扩展flex-shrink：收缩比例（nowrap)，默认 1 等比收缩flex-basis：定义 item 在主轴上的基本尺寸(定义子项的基本宽 or 高)，默认 autoflex缩写 固定顺序（grow shrink basis）可省略。noneauto（可扩展可收缩）
快捷写法：只写 grow shrink，默认忽略设定的
width；只写 basis 默认可扩展可收缩。尽量使用 flex 复合写法。align-self：子项自身的交叉轴对齐方式order：子项的排列顺序，数值越小越靠前，可以负数
以上两个属于单独调整的两个属性
实例
- 什么时候想到用 flex - 移动端 - 单、多行垂直居中 - 需要垂直对齐的列表元素 - 单行选项卡 - 垂直弹性布局 - 分栏，一些栏定宽+其他栏自适应
练习
骰子 🎲（练习对齐）👉code
一栏定宽 + 一栏自适应 👉code
- tab 选项卡 👉code
垂直弹性布局：👉code
另一种方法：header footer position 固定位置
注意对overflow和超出视口部分滚动的设置
常见问题
- 简写 flex 属性，导致设定宽高无效
- flex 容器中的文本自动成为 flex 子项，除了空格
- 子项的 float、clear 和 vertical-align 属性失效
- 如果子项是绝对定位，定位基准参考 flex 容器的
content盒子。因为 flex 本身就是对其 content 的文档流进行操作 - flex 子项的 margin：外边距合并失效，margin：auto 可自动分配剩余空间，达到垂直居中的效果，类似操作 flex 容器的主轴交叉轴对齐
- flex 容器主轴和 writing-mode：一旦独立设定 writing-mode，优先级高于 flex 容器轴向操作，子项内的文字也会随
writing-mode 改变