谈谈 flex
flex 是 css3 中新增的一种布局方式，也就是弹性盒模型布局。弹性盒子中子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应空间。
而之前 css 标准中为我们提供了 3 中布局方案，也就是标准文档流布局、浮动布局、和定位布局。这几种布局方式搭配，可以搞定布局上常见的需求，但比如水平居中，和垂直居中，采用定位布局的方式，它不够语义化，并且不够灵活。所以在这种情况下，第 4 种布局方式：flex 布局就诞生了。它可以设置一个属性就能实现居中，并且可以随着窗口的缩放自适应。
使用 flex 布局的话，首先需要设置父元素的 display 的值为 flex 或 inline-flex，也就是定义一个弹性容器。flex 的核心概念就是 容器 和 轴，容器包含外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布局的特性全都构建在这两个概念上。flex 布局涉及的 css 属性除了 display 的值为 flex 和 inline-flex 外，共有 12 个属性，其中，父容器和子容器各 6 个。不过，常用的属性只有 4 个，子容器和父容器各 2 个。
首先是父容器的属性：
常用的两个属性：
- justify-content: 这个属性用于定义如何沿主轴方向排列子容器
- 位置排列
- flex-start：沿着主轴方向的起始端对其
- flex-center：主轴居中对齐
- flex-end：主轴方向的末端对齐
- 分布排列
- space-between：沿主轴均匀排列，首尾两端的子容器与父容器相切
- space-around：沿主轴均匀排列，位于首尾两端的子容器到父容器的距离是子容器间距的一半
- 位置排列
- align-items：定义子容器如何沿交叉轴排列
- flex-start：交叉轴起始端对齐
- flex-center：居中对齐
- flex-end：尾端对齐
- baseline：基线对齐，这里的基线就是指首行文字，交叉轴的起点到首行文字距离最大的子容器将会与起始端相切以确定基线
- stretch：子容器沿交叉轴方向的尺寸将会拉伸到与父容器一致
不太常用的属性：
- flex-wrap：这个属性可以设置子容器是否换行，不但可以顺序换行，还可以设置逆序换行
- nowrap：不换行
- wrap：换行显示
- wrap-reverse：反向换行显示
- flex-flow：轴与换行组合设置，flow 即流向，也就是可以设置子容器沿着哪个方向流动，流动到终点是否换行。是个复合属性，也就是 flex-direction 和 flex-flow 的结合。
- 比如：row nowarp 或 column wrap 等组合
- align-content：子容器多行排列时，设置子容器沿交叉轴对齐的方式
- flex-start：起始端对齐
- center：居中对齐
- flex-end：交叉轴末端
- space-around：等边均匀分布，位于首尾两端的子容器到父容器的距离是子容器之间间距的一半
- space-between：沿交叉轴均匀分布，首尾两端的子容器与父容器相切
- stretch：尺寸沿交叉轴方向拉伸至与父容器一致
接下来是子容器的属性：
常用的两个属性：
flex：这个属性定义子容器在主轴上如何伸缩，弹性盒模型，弹性，弹性，是有弹性的，它们会自动填充剩余的空间，这个伸缩的比例由 flex 属性的值决定
- 这个值可以是数字，如 flex: 1 或 flex: 2
- 这个值也可以是带单位的数字，如 flex: 15px
- 这个值还可以是 none ，设置为 none 则不伸缩
- 这个值是多个值的缩写，虽然可以 1-3 个值连用，但通常 1 个值就可以解决需求
align-self：单独设置子容器如何沿交叉轴排列，可选值与 align-items 完全一致，align-self 的优先级更高
不太常用的属性：
- flex-basis：表示在不伸缩的情况下，容器的原始尺寸。主轴方向为横向时，代表宽度；主轴方向为纵向时，代表高度
- flex-grow：子容器弹性增长比例，也就是拉伸因子
- flex-shrink：设置子容器弹性收缩比例。
- order：设置子容器的排列顺序
- 数值，默认为 0 ，可以为负值，数字越小，排列位置越靠前，会覆盖 HTML 的原本排列。