带你快速了解flex布局

欢迎来到Flexbox Froggy。在游戏中你需要使用flex布局中的容器属性(flex container)和子项属性（flex items）来帮助青蛙和他的朋友们跳到荷叶上！

游戏链接：flexboxfroggy.com/#zh-cn（文章末尾有答案哦~）

游戏开始前我们可以先了解一下flex布局

flex布局也称弹性盒布局，是一种一维布局模型

容器属性：

• display 定义一个flex 容器，常见值 

  flex 内部使用flex布局，对外展示块级特性
  inline-flex 内部使用flex布局，对外展示内联特性

• flex-direction 定义一个flex 子项排列的方向(水平排列/垂直排列)

  row : 默认值，子项水平排列
  column: 子项从上到下排列
  row-reverse: 子项水平逆序排列
  column-reverse: 子项垂直逆序排列

• flex-wrap flex子项默认挤到一行放置，该属性课设置是否折行放置

  no-wrap: 默认值，所有子项放置到一行
  wrap: 子项会折行放置到多行(从上到下折)
  wrap-reverse: 子项会折行放置到多行(从下到上折)

• flex-flow flex-direction和 flex-wrap 的合并写法

  flex-flow: column wrap; /* <'flex-direction'> || <'flex-wrap'> */

• justify-content 定义子项沿着主轴的分布方式

  flex-start: 元素和容器的左端对齐
  flex-end: 元素和容器的右端对齐
  center: 元素在容器里居中。
  space-between:元素之间保持相等的距离
  space-around:元素周围保持相等的距离

• align-items 定义子项沿着侧轴的分布方式

  flex-start: 元素与容器的顶部对齐。
  flex-end: 元素与容器的底部对齐。
  center: 元素纵向居中。
  baseline: 元素在容器的基线位置显示。
  stretch: 元素被拉伸以填满整个容器。

• align-content flex-start: 多行都集中在顶部。
  flex-end: 多行都集中在底部。
  center: 多行居中。
  space-between: 行与行之间保持相等距离。
  space-around: 每行的周围保持相等距离。
  stretch: 每一行都被拉伸以填满容器

flex子项属性

• order 设置子项在容器中的次序，值为数字，默认为0

• flex-basis 设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值； 如果没设置或者为 auto，那子项的空间为设置的width/height 的值

• flex-grow 用来“瓜分”父项的“剩余空间” 。

• flex-shrink 用来“吸收”超出的空间。

• flex flex-grow、flex-shrink、flex-basis的结合。

• align-self 单独设置子项的沿侧轴的位置 float、clear、vertical-align 对flex子项是无效的

答案：

1. justify-content:flex-end;

2. justify-content:center;

3. justify-content:space-around;

4. justify-content:space-between;

5. align-items:flex-end;

6. justify-content:center; align-items:center;

7. align-items:flex-end; justify-content:space-around;

8. flex-direction:row-reverse;

9. flex-direction:column;

10. flex-direction:row-reverse; justify-content:flex-end;

11. flex-direction:column; justify-content:flex-end;

12. flex-direction:column-reverse; justify-content:space-between;

13. flex-direction:row-reverse; justify-content:center; align-items:flex-end;

14. order:1;

15. order:-1;

16. align-self:flex-end;

17. order:5; align-self:flex-end;

18. flex-flow:row wrap;

19. flex-flow:column wrap;

20. flex-flow:column wrap;

21. align-content:flex-start;

22. align-content:flex-end;

23. flex-direction:column-reverse; align-content:center;

24. flex-direction:column-reverse; flex-wrap:wrap-reverse; justify-content:center; align-content:space-between;

参考自饥人谷