CSS弹性布局
Flexbox of CSS
The First
A webpage where you could study flexbox of css.
FLEXBOX FROGGY
If you want to use flexbox layout in webpage.You need set value of display
property to flex
.
- For example
.box {
display: flex; //using flexbox layout
}
The second
-
introduction of flexbox propertys
justify-content
This property could aligns items horizontally and accepts the following values:
.box { justify-content: flex-start; //Items align to the left side of the conthener. justify-content: flex-end; //Items align to the end side of the container. justify-content: center; //Items align to the center of the container. justify-content: space-around; //Items display with equal spacing around them. justify-content: space-between;//Items display with equal spacing between them. }
align-items
This CSS property aligns items vertically and accepts the following values:
.box { align-items: flex-start; //Items align to the top of the container. align-items: flex-end; //Items align to the bottom of the container. align-items: center; //Items align at the vertical center of the container. align-items: baseline; //Items display at the baseline of the container. align-items: stretch; //Items are stretched to fit the container. }
flex-direction
This css property defines direction items are placed in the container.
.box { flex-direction: row; // Items are placed the same as the text direction. flex-direction: row-reverse; // Items are placed opposite to the text direction. flex-direction: column; // Items are placed top to bottom. flex-direction: column-reverse; // Items are placed bottom to top. }
The third
Sometimes reversing 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 value(-2, -1, 0, 1, 2).order
.box {
order: -1;
}
align-self
Another property you can apply to individual items is
align-self
. This property accepts the same values asalign-items
and its value for the specific item.
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
order: 1;
align-self: flex-end;
}
flex-wrap
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;
}
flex-wrap
The two properties
flex-direction
andflex-wrap
are used so often together that the shorthand propertyflex-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.
align-content
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, whilealign-items
determines how the items as a whole are aligned within the container. When there is only one line,align-content
has no effect.
The End
Learning requires constant practice.