http://flexboxfroggy.com/

    1、Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:

    • 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.

    For example, justify-content: flex-end; will move the frog to the right. image.png

    2、Now use align-items to help the frogs get to the bottom of the pond. This CSS property aligns items vertically and accepts the following values:

    • 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.

    3、The frogs need to get in the same order as their lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:

    • 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.

    4、Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).
    Use the order property to reorder the frogs according to their lilypads.

    5、Another property you can apply to individual items is align-self. This property accepts the same values as align-items and its value for the specific item.
    align-self 设置的是子元素；align-items 设置的是父元素
    结合使用的话：先设置align-tiems:center，如果某一个子元素想格外设置，就设置 align-self:flex-end;

    6、Oh no! The frogs are all squeezed onto a single row of lilypads. Spread them out using the flex-wrap property, which accepts the following values:

    • 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.

    换行

    7、The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.
    For example, you can use flex-flow: row wrap to set rows and wrap them.
    flex-flow 封装了flex-direction 和 flex-wrap ，第一个属性填flex-direction的属性，第二个属性填flex-flow的属性

    8、The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:

    • 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.

    This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.
    https://www.runoob.com/cssref/css3-pr-align-content.html