这篇笔记是系统学习flex时所记，适合复习使用，新手学习还是要配合图示和代码来学习更容易理解。
flex布局模型：弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
首先要弄清楚几个重要概念：
flex-container：弹性盒子容器
flex-items：flex-container里面的直接子元素叫做flex-items
主轴：main axis：main start & main end & main size
交叉轴：cross axis：cross start & cross end & cross size
用在flex container上的CSS属性：flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content
应用在flex items上的CSS属性：flex、flex-grow、flex-basis、flex-sshrink、order、align-self
开启flex布局：
.box { display:flex or inline-flex; } // 块级元素或行内元素
1. flex-direction ：决定了main axis主轴方向，默认沿着main axis主轴从main start开始从main start开始往main end方向排布。
row---默认从左至右, row-reverse----从右至左, column----从上至下, column-reverse----从下至上
2. justify-content：决定了flex items在主轴上的对齐方式
flex-start-----默认与main start对齐， flex-end------与main end对齐， center-------居中对齐
space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离一半
3. align-items：决定了flex items在cross axis上的对齐方式
normal------效果相当于stretch-----当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start----默认与cross start对齐， flex-end------与cross-end对齐， center------居中对齐， baseline------基线对齐，第一行文本底部为基线
4. flex-wrap： 默认nowrap，不换行；wrap，换行。
默认情况下，所有的flex items都会在同一行显示 ， wrap-reverse-----对比wrap，cross start 与cross end 相反
5. flex-flow： 是flex-direction || flex-wrap的简写，可以省略，顺序任意
6. align-content： 决定了多行flex items 在cross axis上的对齐方式，用法与justify-content类似
stretch-----默认值，与align-items的stretch类似， flex-start-----默认与cross start对齐， flex-end------与cross end对齐， center-------居中对齐
space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离一半
7. order： 决定flex items的排布顺序，默认为0，值可以设置为任意整数（正，负，0），值越小排在前面
8. align-self： flex items通过它覆盖flex container设置的align-items
auto（默认值）：遵从flex container的align-items设置，
stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
9. flex-grow： 决定了flex items如何扩展
可以设置任意非负数字（正小数、正整数、0），默认是0。
当flex container在main axis方向上有剩余size时，flex-grow属性才会生效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为：flex container的剩余size*flex-grow/sum
如果所有flex items的flex-grow总和sum不超过1，每个flex item扩展的size为：flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width\max-height
10. flex-shrink：决定了flex items如何收缩
可以设置任意非负数字（正小数、正整数、0），默认值是1
当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效
如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为：flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为：flex items超出flex container的size*sum*收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink*flex item的base size
base size就是flex item放入flex container之前的size
flex items收缩后的最终size不能小于min-width\min-height
11. flex-basis：用来设置flex items在main axis方向上的base size
auto（默认值）、具体的宽度数值（100px）
决定flex items最终base size的因素，从优先级高到低
max-width\max-height\min-width\min-height > flex-basis > width\height > 内容本身的size
12. flex：是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个或3个值
单值语法：无单位数---grow，有效宽度值---basis，关键字none,auto或initial
双值语法：第一个必须为无单位数，第二位:无单位---shrink,有效宽度值---basis
三值语法：无单位，无单位，有效宽度值
13. 总结：
布局---->左侧------->item------->清除浮动（父元素设置固定高度 or clear-fix写在父元素）
语义化标签：nav，header，footer，section，article，aside
媒体标签：video、audio
input：placeholder、multiple、autofocus、type(date、time、tel、color、number、e-mail......)
