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确实好用。

flex游戏http://www.flexboxdefense.com/