首先要有个容器,并设置display:flex;display:-webkit-flex;该容器有以下六个属性:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
项目的属性:
1 2 3 4 5 6 7 8 9 10 11 |
|
1.flex-direction
1 2 3 4 |
|
2.flex-wrap
1 2 3 |
|
3.flex-flow,是flex-direction和flex-wrap的简写形式。
1 |
|
4.justify-content
1 2 3 4 5 |
|
5.align-items
1 2 3 4 5 |
|
6.align-content
1 2 3 4 5 6 |
|
7.flex-grow
定义了放大比例,默认为0,即如果存在剩余空间,也不会放大。但是,如果所有项目的flex-grow属性为1,则他们将等分剩余空间(如果有的话),如果其中一个为2,则他是其他项目的2倍宽度。
8.flex-shrink
定义了项目的缩小比例,默认为1,即如果空间不足,项目将缩小。如果有一个项目的flex-shrink为0,其他都为1,空间不足时,前者不缩小。
9.align-self,定义项目自己的对齐方式