练习地址: http://flexboxfroggy.com/
Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! 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.
Help all three frogs find their lilypads just by using justify-content
. This time, the lilypads have lots of space all around them.
If you find yourself forgetting the possible values for a property, you can hover over the property name to view them. Try hovering over justify-content
.
#pond { display: flex; justify-content: space-around; }
Now the lilypads on the edges have drifted to the shore, increasing the space between them. Use justify-content
. This time, the lilypads have equal spacing between them.
#pond { display: flex; justify-content: space-between; }
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.
#pond { display: flex; align-items: flex-end; }
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.
#pond { display: flex; flex-direction: row-reverse; }
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 set it to a positive or negative integer value.
Use the order
property to reorder the frogs according to their lilypads.
#pond { display: flex; } .yellow { order: 1 }
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.
#pond { display: flex; flex-wrap: wrap; }
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 one of the two properties separated by a space.
For example, you can use flex-flow: row wrap
to set rows and wrap them.
Try using flex-flow
to repeat the previous level.
#pond { display: flex; flex-flow: column wrap; }
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.
#pond { display: flex; flex-wrap: wrap; align-content: flex-start }