Flex布局(弹性布局):

Tips:

1.参考阮一峰的文章：www.ruanyifeng.com/blog/2015/0…

2.参考 Flex 布局的小游戏：Flexbox Froggy（弹性盒小青蛙）flexboxfroggy.com/

正文：

1. justify-content（主轴对齐方式）：
   

   flex-start 、 flex-end 、 center 、space-between 、 space-around;

2. align-items（交叉轴对齐方式）：
   

   flex-start 、 flex-end 、 center 、 baseline 、 stretch;

3. flex-direction（轴线方向）：
   

   row 、 column 、 row-reverse 、column-reverse

4. flex-wrap（换行方式）：
   

   wrap 、 nowrap 、 wrap-reverse

5. align-items（轴线对齐方式）：
   

   flex-start 、 flex-end 、 center 、 stretch 、 space-between 、 space-around;

6. flex-flow（`flex-direction`和`flex-wrap`属性的简写）：
   

   row nowrap 是默认值、 子属性：

1. order(排列顺序) : 默认为0(数值越小，排列越靠前)
2. felx(flex-grow , flex-shrink 和 flex-basis 的简写): 默认值：0 1 auto，后两个属性可选
3. align-self(单个项目的对齐方式)：默认值：auto，

auto | flex-start | flex-end | center | baseline | stretch;

4. flex-grow(放大比例): 默认为0(如果存在剩余空间，也不放大)
5. flex-shrink(缩小比例): 默认为1(如果空间不足，该项目将缩小)
6. felx-basis(主轴空间): 默认为auto(类似 width 或 height 属性)

一个面试题：

宽度不固定的的盒子，每行只能有2个盒子（高度：200px,宽度自适应），且3个间隙空间是20px怎么实现?