CSS弹性布局

Flexbox of CSS

The First

A webpage where you could study flexbox of css.

FLEXBOX FROGGY

http://flexboxfroggy.com

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 as align-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 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.

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, while align-itemsdetermines how the items as a whole are aligned within the container. When there is only one line, align-contenthas no effect.

The End

Learning requires constant practice.