flex 下对齐_flex布局 小青蛙跳荷叶 答案

level1

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

flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。
举个例子，justify-content: flex-end;会将青蛙移到右边。

#pond {  display: flex;  justify-content:flex-end;}

图示

1.png

---

level2

再用justify-content一次来帮助这些青蛙到他们的荷叶上。记住这个CSS属性能水平对齐元素，并接受这些参数：

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

#pond {  display: flex;  justify-content:center;}

2.png

---

level3

仅靠justify-content来帮助全部三只青蛙找到他们的荷叶。这次荷叶周边都有很多的空地。

如果你忘了一个CSS属性可选的值的话，你可以将鼠标移到参数名上面来查看。试试将鼠标移到justify-content。

#pond {  display: flex;  justify-content: space-around}

3.png

---

level4

现在边上的荷叶都漂到了岸上，使得他们之间的间距变大了。使用justify-content。这次荷叶之间有相等的距离。

#pond {  display: flex;  justify-content:space-between}

4.png

---

level5

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

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

#pond {  display: flex;  align-items:flex-end;}

5.png

---

level6

使用justify-content和align-items的组合来指引青蛙们到池塘中央。

#pond {  display: flex;  justify-content:center;  align-items:center;}

6.png

---

level7

这些青蛙又需要穿过池塘了。这次有些荷叶周围有充足的距离。用justify-content和align-items的组合。

#pond {  display: flex;  justify-content:space-around;  align-items:flex-end;}

7.png

---

level8

青蛙们需要和他们的荷叶保持对应的顺序。我们可以用flex-direction属性。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

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

#pond {  display: flex;  flex-direction:row-reverse;}

8.png

---

level9

使用flex-direction属性，帮助青蛙们找到它们该去的列。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

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

#pond {  display: flex;  flex-direction:column;}

---

level10

帮助青蛙们回到它们的荷叶上。尽管它们看上去离的很近，需要用flex-direction和justify-content来帮它们到那里。

注意当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了。

#pond {  display: flex;  flex-direction:row-reverse;  justify-content:flex-end;}

---

level11

用flex-direction和justify-content来帮助青蛙找到他们的方向

注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

#pond {  display: flex;  flex-direction:column;  justify-content:flex-end;}

---

level12

用flex-direction和justify-content来帮助青蛙回到他们的荷叶上。

#pond {  display: flex;  flex-direction:column-reverse;  justify-content:space-between;}

---

level13

用flex-direction，justify-content以及align-items来帮助青蛙回到他们的荷叶上。

#pond {  display: flex;  flex-direction:row-reverse;  justify-content:center;  align-items:flex-end;}

---

level14

有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

用order来调整青蛙的顺序。

#pond {  display: flex;}.yellow {  order:1;}

---

level15

用order属性来把红青蛙送回它的荷叶去。

#pond {  display: flex;}.red {  order:-1;}

---

level16

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

#pond {  display: flex;  align-items: flex-start;}.yellow {  align-self:flex-end;}

---

level17

用order和align-self的组合来帮助青蛙们到它们的目的地。

#pond {  display: flex;  align-items: flex-start;}.yellow {  order:1;  align-self:flex-end;}

---

level18

哦不！这些青蛙都挤到一行了。用flex-wrap属性把它们分散看看。这个属性接受这些值：

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

#pond {  display: flex;  flex-wrap:wrap;}

---

level19

帮这些青蛙们排成整齐的三列。使用flex-direction和flex-wrap的组合。

#pond {  display: flex;  flex-direction:column;  flex-wrap:wrap;}

---

level20

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行。
试着用flex-flow来重复上一关的任务。

#pond {  display: flex;  flex-flow:column wrap;}

---

level21

青蛙们在池塘里到处都是，然而荷叶都在顶部。你可以使用align-content来决定行与行之间隔多远。这个属性接受这些值：

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。
这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

#pond {  display: flex;  flex-wrap: wrap;  align-content:flex-start;}

---

level22

现在水流把荷叶都推到底部了。用align-content来指引青蛙到那里。

#pond {  display: flex;  flex-wrap: wrap;  align-content:flex-end;}

---

level23

青蛙们开完了派对，现在该回家了。用flex-direction和align-content的组合来把它们带回各自的家。

#pond {  display: flex;  flex-wrap: wrap;  flex-direction:column-reverse;  align-content:center;}

---

level24

用这些你所学的CSS属性，最后一次把青蛙们带回家:

justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content

#pond {  display: flex;  flex-direction:column-reverse;  flex-wrap:wrap-reverse;  justify-content:center;  align-content:space-between;}