flex
整体布局
为什么要用flex布局，flex之前有什么问题吗？当然啦，比如你怎么做到用正常流把两个div一个靠左一个靠右。
1.搞两个div，中间用margin。这样只要屏幕一缩放就bug
2.搞三个div，中间div不显示边框。一样屏幕缩放就bug。不过可以强制不换行，然后宽度按百分比来可以搞定缩放bug，但是会有其他bug。
为什么会这样呢，因为正常流必须从左往右啊，所以要干掉正常流所以float就出现了。
但是float也解决不了很多需求所以flex出现了。
flex之前无非就是正常流和float
内联元素从左到右，块级元素从上到下排列
浮动+清除浮动
我想1和2各占50%但是存在1px框所以超了，那我岂不是还得去搞48%，48%？
这张图说明了用flex调整方向的时候的原理。
row：意思是main轴是横向的
row-revers：意思是main轴需要翻转。这状态下的justify-content:flex-end/start的方向也会翻转
里面的元素叫做flex item 外面的元素叫flex container
划重点了，记不住不用记了到时候有需求反正就三个，row/row-reverse,column/column-reverse,wrop-revers轮着试一下就知道了。
flex-direction有 6个取值，主要是1，2，5，6
flex-wrap
flex默认是不换行的，如果不够的话会把里面的div挤挤
flex-flow
上面两个可以同时用
justify-content
flex-direction是row的时候主轴就是横轴。同理是column的时候主轴是纵轴
between
around
start
end
center
align-items
这个属性不能把高度限制死。
end
start（end和start用得最多）
center
默认stretch
align-content
和justify-content很像，但是它是控制行与行。justify-content是控制div和div之间
局部布局
fex-grow增加的比例，关键字是比例
把多余空间给了child1
3个孩子按比例分了多余的空间
flex-shrink收缩的比例
flex-bosis
flex
order
align-self
不写宽度的时候，宽度由内容决定
1
2
3
双飞翼就是3列，左右两列的宽度一样
4
3句话就可以了，比其他方便多了。
作业
flex游戏http://flexboxfroggy.com/#zh-cn
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
需要3句话吧，不用flex-direction:column给倒过来不行的吧
一句代码就够了
order好像看给你分几份，它好像就分两份。我向右就是1，2，3都行，向左就是-1，-2，-3都行
除了flex-dirction可以横向竖向翻转，还有flex-float:wrap-reverse换行翻转。reverse是交换的意思，所以知道英语搜mdn确实好用。
