第一章：简介
Flex：FlexiableBox（弹性盒，伸缩盒）
它是css中又一种布局手段，它主要用来代替传统浮动来进行页面布局
css布局的传统解决方案：基于盒子模型，使用display属性 +position属性 +float属性。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了大部分浏览器的支持，特别是在移动端开发，flex布局是一种很常用的布局手段，是每一个前端开发者必须掌握的技能
第二章：概念
flex布局中有两个非常重要的概念：弹性容器和弹性元素
弹性容器
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 我们通过 display 来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内弹性容器
弹性元素
- 弹性容器的子元素是弹性元素（也称做弹性项）
- 一个元素可以同时是弹性容器和弹性元素
主轴和侧轴(辅轴)的概念
主轴：弹性元素的排列方向称为主轴，主轴有可能是水平的，有可能是垂直的，主轴有一个方向，有可能是自左向右，有可能自上向下....
侧轴：与主轴垂直方向的称为侧轴
第三章：样式
弹性布局的样式总共分为两类：一个专门给弹性容器设置，一类专门给弹性元素设置
学习第一个弹性容器的样式属性
flex-direction 用来指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素在容器中水平排列（左向右）
- 主轴 自左向右
row-reverse 弹性元素在容器中反向水平排列（右向左）
- 主轴 自右向左
column 弹性元素纵向排列（自上向下）
- 主轴 自上向下
column-reverse 弹性元素反向纵向排列（自下向上）
- 主轴 自下向上
学习两个弹性元素的样式属性
flex-grow
- 指定弹性元素的伸展的系数，默认是0
- 当父元素有多余的空间时，子元素如何伸展
- 父元素的剩余空间，会按照比例进行分配
flex-shrink
- 指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩，默认值是1
- 这两个属性可以分别给每个子元素设置
利用弹性盒做一个简单的导航条
弹性容器的样式
flex-wrap:
设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 表示元素沿着辅轴反方向换行
flex-flow
wrap 和 direstion 的简写属性（可以同时设置两个属性并且没有顺序要求）
例如：flex-flow:wrap row; 设置子元素在水平方向自左向右排列，并且当父元素宽度不足以容纳子元素时子元素自动换行
justify-content
- 如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
fiex-start 元素沿着主轴的起边排列
flex-end 元素沿着主轴的终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧
align-items
- 元素在辅轴上如何对齐
- 元素间的关系
- 可选值
stretch 默认值，将元素的长度设置为相同的值（会拉伸元素）
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐（用得很少）
align-content（属性值和justify-content的属性值一样）
- 如何分配辅轴上的空白空间（辅轴上的元素如何排列）
- 可选值：
fiex-start 元素沿着辅轴的起边排列
flex-end 元素沿着辅轴的终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧
这里掺杂一个弹性元素的属性
align-self
- 用来覆盖当前弹性元素上的align-items，取值和align-items一样
stretch 默认值，将元素的长度设置为相同的值（会拉伸元素）
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐（用得很少）
弹性元素的样式
弹性元素的样式相对于弹性容器来说就比较简单了
align-self
前面已经介绍了，这里就省略了
flex-grow
弹性的增长系数，默认值是0，不增长
flex-shrink
弹性元素的缩进系数，默认值是1
- 缩减系数的计算方式比较复杂
- 缩减多少是根据缩减系数和元素大小来计算
flex-basis
指定的是元素在主轴上的基础长度
如果主轴是 横向的 则该值指定的就是元素的宽度
如果主轴是 纵向的 则该值指定的就是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了一个具体的值，则以该值为准
！！！ flex-basis flex-shrink flex-grow这三个属性就类似弹簧的三种状态：静止、收缩和拉伸
flex
可以设置弹性元素所有的三个样式
flex 增长 缩减 基础;
initial "flex: 0 1 auto"
auto "flex: 1 1 auto"
none "flex: 0 0 auto" 弹性元素没有弹性
！！！注意一点：flex：1和flex-grow:1之间的是有区别的
flex:1会设置flex-basis：0，也就是说元素设置flex属性，它的宽度或者高度就会变成0
而flex-grow:1不会设置flex-basis，flex-basis的值还是默认的auto
order
- 决定弹性元素的排列顺序
- 可以通过order来影响元素的排列顺序，这是一个非常强大的功能
- 有了它之后，我们就不需要通过结构去调整元素的顺序
- 只需要通过order这个属性就可以改变元素的顺序
第四章：总结
flex布局可以很方便实现网页元素的布局，可以搭配百分比，rem等来实现各类布局，是一种可以代替传统浮动布局的手段，整体知识点不难，只是属性较多，弹性容器和弹性元素分别都有六个属性，以及它们各自的取值，需要多加练习才能掌握
也可以参考阮一峰老师的这篇博客教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
