Flexbox Froggy 小游戏答案 ☆ 学习Flex布局

flex属性和display（inline，block，inline-block）属性一样，不过在做移动web的时候，它更有优势，并且非常好用，flex是css3中的属性，在移动web下我们不用考虑它的兼容性，所以可以放心的使用。

#pond {
  display: flex;

※ flex-direction:row-reverse; 是从中轴线反转的。效果图：

※

※ Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

※ Notice that when you set the direction to a reversed row or column, start and end are also reversed. 即reverse 反转效果也影响其它语句如flex-direction:column-reverse;justify-content:flex-end; 实际上这里效果看起来是从start开始对齐而非end

1. justify-content:flex-end; 或者 justify-content:end;

2. justify-content: center;

3. justify-content:space-around;

4. justify-content:space-between;

5. align-items:flex-end; 或者 align-items:end;

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

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

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;

#pond {
  display: flex;
}

.yellow {

15. order:-1; -2 -3 -4 -5等只要小于0都可以

16. align-self:flex-end;

17 order:1;
align-self:flex-end;

18. flex-wrap:wrap;

19. flex-direction:column;
flex-wrap:wrap;

※ The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.

For example, you can use flex-flow: row wrap to set rows and wrap them.

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-flow:column-reverse wrap-reverse;
          justify-content:center;
          align-content:space-between;

24.

Flexbox Froggy 小游戏答案 ☆ 学习Flex布局

猜你喜欢