FLEXBOX FROGGY 小青蛙跳荷叶 学会display: flex

display:flex;

 

青蛙跳到荷叶游戏。http://flexboxfroggy.com/

 

justify-content 属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素，并且接受以下几个参数：

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

 

align-items来帮助青蛙们到池塘的底部。这个CSS属性纵向对齐元素并且可选以下几个值：

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

 

flex-direction属性。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

 

order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

align-self属性。控制单个，接收值与align-items一致。

 

flex-wrap属性，这个属性接受这些值：

nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行。

 

lex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

 

align-content来决定行与行之间隔多远。这个属性接受这些值：

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

 

 

level1

左对齐

justify-content:flex-end;

level2

居中

justify-content:center;

level3

space-around:元素周围保持相等的距离。

justify-content: space-around

level4

space-between:元素之间保持相等的距离。

justify-content:space-between

 

level5

flex-end: 元素与容器的底部对齐。

align-items:flex-end;

level6

水平居中，纵向居中

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

level7

水平周围相等，纵向底部

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

level8

row-reverse: 元素摆放的方向和文字方向相反。

flex-direction:row-reverse;

level9

column: 元素从上放到下。

flex-direction:column;

level10

水平右对齐然后相反

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

 level11

从上到下，水平对齐，也变了由上到下。

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

 level12

相反，再水平相同距离

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

level13

水平居中，纵向底部，文字相反

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

level14

order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

order:1

level15

order可以为负数

order:-1

level16

控制单个元素的属性是align-self。这个属性接受和align-items一样的那些值。

align-self:flex-end;

level17

对应位置，对应纵向

order:3;
align-self:flex-end;

level18

flex-wrap，行判断

flex-wrap:wrap;

level19

分散，纵向

flex-wrap:wrap;
flex-direction:column;

level20

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

flex-flow:column wrap;

level21

可以使用align-content来决定行与行之间隔多远

align-content:flex-start;

level22

 内容底部

align-content:flex-start;

level23

内容居中，方向相反

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

level24

综合练习

flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-items:flex-end;
align-content:space-between;