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.