level1
justify-content 属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素，并且接受以下几个参数：
flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。
举个例子，justify-content: flex-end;会将青蛙移到右边。
#pond {
display: flex;
justify-content:flex-end;
}
图示
level2
再用justify-content一次来帮助这些青蛙到他们的荷叶上。记住这个CSS属性能水平对齐元素，并接受这些参数：
flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。
#pond {
display: flex;
justify-content:center;
}
level3
仅靠justify-content来帮助全部三只青蛙找到他们的荷叶。这次荷叶周边都有很多的空地。
如果你忘了一个CSS属性可选的值的话，你可以将鼠标移到参数名上面来查看。试试将鼠标移到justify-content。
#pond {
display: flex;
justify-content: space-around
}
level4
现在边上的荷叶都漂到了岸上，使得他们之间的间距变大了。使用justify-content。这次荷叶之间有相等的距离。
#pond {
display: flex;
justify-content:space-between
}
level5
现在用align-items来帮助青蛙们到池塘的底部。这个CSS属性纵向对齐元素并且可选以下几个值：
flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。
#pond {
display: flex;
align-items:flex-end;
}
level6
使用justify-content和align-items的组合来指引青蛙们到池塘中央。
#pond {
display: flex;
justify-content:center;
align-items:center;
}
level7
这些青蛙又需要穿过池塘了。这次有些荷叶周围有充足的距离。用justify-content和align-items的组合。
#pond {
display: flex;
justify-content:space-around;
align-items:flex-end;
}
level8
青蛙们需要和他们的荷叶保持对应的顺序。我们可以用flex-direction属性。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：
row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。
#pond {
display: flex;
flex-direction:row-reverse;
}
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;
}
