Flexbox Froggy

Flexbox Froggy

Level 1

属性 justify-content 可以水平对齐元素：

• flex-start: Items align to the left side of the container.
• flex-end: Items align to the right side of the container.
• center: Items align at the center of the container.
• space-between: Items display with equal spacing between them.
• space-around: Items display with equal spacing around them.

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

Level 2

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

Level 3

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

Level 4

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

Level 5

属性 align-items 可以纵向对齐元素：

• flex-start: Items align to the top of the container.
• flex-end: Items align to the bottom of the container.
• center: Items align at the vertical center of the container.
• baseline: Items display at the baseline of the container.
• stretch: Items are stretched to fit the container.

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

Level 6

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

Level 7

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

Level 8

属性 flex-direction 定义了元素在容器里摆放的方向：

• row: Items are placed the same as the text direction.
• row-reverse: Items are placed opposite to the text direction.
• column: Items are placed top to bottom.
• column-reverse: Items are placed bottom to top.

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

Level 9

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

Level 10

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

Level 11

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

Level 12

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

Level 13

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

Level 14

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

#pond {
  display: flex;
}

.yellow {
  order: 2;  /* any number >= 1 */
}

Level 15

#pond {
  display: flex;
}

.red {
  order: -1;
}

Level 16

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

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

.yellow {
  align-self: flex-end;
}

Level 17

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

.yellow {
  align-self: flex-end;
  order: 1;
}

Level 18

用 flex-wrap 属性把它们分散看看：

• nowrap: Every item is fit to a single line.
• wrap: Items wrap around to additional lines.
• wrap-reverse: Items wrap around to additional lines in reverse.

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

Level 19

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

Level 20

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

举个例子，你可以用 flex-flow: row wrap 去设置行并自动换行。

试着用 flex-flow 来重复上一关的任务。

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

Level 21

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

• flex-start: Lines are packed at the top of the container.
• flex-end: Lines are packed at the bottom of the container.
• center: Lines are packed at the vertical center of the container.
• space-between: Lines display with equal spacing between them.
• space-around: Lines display with equal spacing around them.
• stretch: Lines are stretched to fit the container.

这可能有些容易混淆，但 align-content 决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候 align-content 没有任何效果。

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

Level 22

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

Level 23

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

Level 24

Bring the frogs home one last time by using the CSS properties you’ve learned:

• 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;
}