FLEXBOX FROGGY11-24level(flex布局小游戏)_Loey_61

网络 02-07 3546

FLEXBOX FROGGY11-24level(flex布局小游戏)

level-11

使用 flex-direction 和 justify-content帮助青蛙找到他们的荷叶

当伸缩方向为纵向时，justify-content将改变垂直方向，align-items将改变水平方向。

flex-direction:column;//将方向更改为垂直方向 justify-content:end;//将小青蛙移到底部 #pond { display: flex; flex-direction:column; justify-content:end; } level-12

使用 flex-direction 和 justify-content帮助青蛙找到他们的荷叶

flex-direction:column-reverse;;//将小青蛙更改为垂直方向翻转 justify-content:space-between;//为每个小青蛙设置相同间隔 #pond { display: flex; flex-direction:column-reverse; justify-content:space-between; } level-13

flex-direction:row-reverse;;//将小青蛙更改为水平方向翻转 justify-content:space-between;//将小青蛙水平居中 align-items:end;//将小青蛙放置在页面最底部 #pond { display: flex; flex-direction:row-reverse; justify-content:center; align-items:end; } level-14

有时，反转容器的行或列顺序是不够的。在这些情况下，我们可以将order属性应用于单个项目。默认情况下，order属性的值为0，我们可以使用这个属性将其设置为正整数或负整数(-2，-1,0,1,2)。根据它们的睡莲顺序使用顺序属性重新排序青蛙。 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order:1;//将黄色小青蛙放到最后开始时所有小青蛙的order默认为0 #pond { display: flex; } .yellow { order:1; } level-15

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order:-1;//将红色小青蛙放到最前面开始时所有小青蛙的order默认为0 #pond { display: flex; } .red { order:-1; }

level-16

另一个可以应用于单个项目的属性是align-self。此属性接受与align-items相同的值及其特定项的值。

align-self:end;//将黄色小青蛙放到最底部 #pond { display: flex; align-items: flex-start; } .yellow { align-self:end; }

level-17

结合 order 与 algin-self ，帮助青蛙到他们的目的地。

order:1;//将黄色小青蛙放到最后面 align-self:end;//将黄色小青蛙放到最下面 #pond { display: flex; align-items: flex-start; } .yellow { order:1; align-self:end; }

level-18

噢,不!青蛙都挤在一排睡莲上。使用flex-wrap属性将它们展开，该属性接受以下值:

nowrap:不换行。

wrap:换行。

换行-反向:以反向方式换行到其他行。

flex-wrap;//换行 #pond { display: flex; flex-wrap:wrap; }

level-19

使用flex-direction和flex-wrap的组合帮助这群青蛙形成三个有序的圆柱

flex-direction:column;//将小青蛙方向改为垂直方向 flex-wrap;//换行 #pond { display: flex; flex-direction:column; flex-wrap:wrap; }

level-20

flex-direction和flex-wrap经常一起使用，因此创建了简写属性flex-flow来组合它们。

例如，您可以使用flex-flow:行换行来设置行并换行。

flex-flow:column wrap;//将小青蛙方向改为垂直方向并换行 #pond { display: flex; flex-flow:column wrap; }

level-21

青蛙散布在池塘里，而睡莲却在顶部扎堆。可以使用align-content设置多行之间的间隔。该属性接受以下值:

flex-start: 行集中在顶部。 flex-end：行集中在底部。 center: 居中。 space-between: 行与行之间的间距相等。 space-around: 线条以相等的间距显示。 stretch: 线条被拉伸以适应容器。这可能会让人困惑，但是align-content确定行之间的间距，而align-items确定在容器中如何对项进行整体对齐。当只有一行时，algin-content没有效果。

algin-content:flex-start;//将每行小青蛙设置为集中在顶部 #pond { display: flex; flex-wrap: wrap; align-content:flex-start; }

level-22

现在水流已经把水底的睡莲挤成了一团。使用algin-content来引导青蛙。

align-content:flex-end;//将每行小青蛙设置为集中在底部 #pond { display: flex; flex-wrap: wrap; align-content:flex-end; }

level-23

青蛙们开了个派对，但现在是回家的时候了。使用flex-direction和align-content的组合，让他们到他们的家。

// flex-direction:column-reverse;//每行小青蛙设置为垂直反转 // align-content:center;//每行小青蛙设置居中 #pond { display: flex; flex-wrap: wrap; flex-direction:column-reverse; align-content:center; }

level-24

最后一次使用CSS属性将青蛙带回家:

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

flex-direction:column-reverse;//每行小青蛙设置为垂直反转 align-content:center;//每行小青蛙设置居中 flex-wrap:wrap-reverse;//换行并反转 justify-content:center;//水平居中 #pond { display: flex; flex-direction:column-reverse; flex-wrap:wrap-reverse; align-content:space-between; justify-content:center; }

结束。