什么是flex布局？
- flex布局是一种用于按行或列布局元素的一维布局方法。（弹性盒模型）
flex 布局出现的目的或意义
- 传统布局，基于盒子模型，依赖于display + position + float 属性实现，非常的不方便，而且有一些效果实现起来比较麻烦，比如垂直居中，而使用flex布局实现起来比较方便
- flex 布局更倾向于响应式布局，用于实现响应式布局非常方便
flex布局 基本概念
1. 开启方式
- 给父元素的display属性设置为flex
父元素 {
display: flex;
}
2. 布局说明：主轴与交叉抽
- 主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
注：我们给开启flex的元素，称为flex容器，其中的子元素称为flex项（item）
3. flex 容器上的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction: 决定了主轴的方向
- row（默认值）：主轴水平方向，起点在左端
- row-reverse：主轴水平方向，起点在右端
- column：主轴垂直方向，起点在上沿
- column-reverse：主轴垂直，起点在下沿
3.2 flex-wrap: 决定是否换行
- nowrap（默认）：不换行
- warp：换行，第一行在上
- wrap-reverse：换行，第一行在下
3.3 flex-flow: flex-direction 与 flex-wrap的简写形式
- 默认值为 row nowrap
3.4 justify-content: 规定了flex项在主轴上的如何对齐
- flex-start（默认值）：左对齐（默认主轴方向从左向右）
- flex-end：右对齐
- center：居中
- space-between：两端对其
- space-around：每项之间以间距相等，以空白填充，两端也有一半的空白部分
3.5 align-items：规定了flex项在交叉抽上的如何对齐
- stretch（默认值）：撑满整个容器的高度。（在没有设置flex项高度的情况下）
- flex-start：交叉抽的起点对齐
- flex-end：交叉抽的终点对齐
- center：交叉抽的中点对齐
- baseline：flex项的第一行文字的基线对齐
3.6 align-content：规定多根轴线时的对齐方式（当轴线不止一根时，有效，即，flex项不止一行时生效）
- stretch（默认值）：轴线占满整个交叉轴
- flex-start: 与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center： 与交叉轴的中点对齐
- space-between：与交叉轴的两端对齐，轴线之间间隔平均分布
- space-around：与space-between类似，但两侧也有一半的空白部分
4. flex项（item）的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order：定义flex项的排列顺序
- order 值越小排列约靠前，默认为0（number类型，整数）
4.2 flex-grow：定义flex项的放大比例
- 默认值为0，即不进行放大
- 不为0时，会把空间按flex-grow的值分配（默认不保留容器的剩余空间）
4.3 flex-shrink：定义了flex项的缩小比例
- 默认值为1，即空间不足时，将该flex项缩小，值为0时不缩小
4.4 flex-basis: 规定flex项在主轴方向上的大小，可设置为百分比值
- 默认值为 auto
- 可选值 content 基于flex项元素的内容自动调整大小
- 若 flex项 同时设置了width，和 flex-basis，则flex-basis具有更高的优先级
4.5 flex: flex-grow，flex-shrink与flex-basis的简写
- 默认值： 0 1 auto，后两个属性可选
- flex: 1 代表的意思是（1 1 auto）
- flex: none 代表的意思是（0 0 auto）
4.6 align-self：规定某一个flex项的对齐方式，可以覆盖align-items属性
- auto（默认值）：表示继承父元素的align-items属性值，若没有父元素，则值同stretch
- 其他5个属性值与 align-items 的属性值一样
内容来源：www.ruanyifeng.com/blog/2015/0…
- order 值越小排列约靠前，默认为0（number类型，整数）
