1 普通情况下的效果

代码:

css3中弹性布局flex简单总结1_flex

效果:

css3中弹性布局flex简单总结1_flex_02

2 添加弹性布局

css3中弹性布局flex简单总结1_flex_03

效果:

css3中弹性布局flex简单总结1_弹性布局_04

3 设置为垂直排放

添加的代码如下:

css3中弹性布局flex简单总结1_弹性布局_05

效果:

css3中弹性布局flex简单总结1_flex_06

4 设置为水平居中显示

css3中弹性布局flex简单总结1_弹性布局_07

效果:

css3中弹性布局flex简单总结1_弹性布局_08

5 设置为垂直方向居中显示

css3中弹性布局flex简单总结1_弹性布局_09

效果:

css3中弹性布局flex简单总结1_flex_10

6 进行换行

flex-wrap: wrap;   /*换行*/

7 justify-content: space-between的使用效果:

css3中弹性布局flex简单总结1_flex_11

8 justify-content: space-around的使用效果:

css3中弹性布局flex简单总结1_弹性布局_12