CSS3弹性盒模型01

属性

CSS3弹性盒模型01_第1张图片
弹性盒模型属性 ![Uploading image_412314.png . . ]

1.flex-direction
主轴位置


CSS3弹性盒模型01_第2张图片
flex-direction
CSS3弹性盒模型01_第3张图片
  1. flex-wrap
    溢出是否换行


    CSS3弹性盒模型01_第4张图片
    flex-wrap

    3.flex-flow

CSS3弹性盒模型01_第5张图片
flex-flow

4.justify-content

CSS3弹性盒模型01_第6张图片
justify-content
CSS3弹性盒模型01_第7张图片
image.png

5.align-items

CSS3弹性盒模型01_第8张图片
align-items
CSS3弹性盒模型01_第9张图片
image.png

6.align-content

CSS3弹性盒模型01_第10张图片
image.png

7.Order

CSS3弹性盒模型01_第11张图片
Order
CSS3弹性盒模型01_第12张图片
image.png

数值大的在后面,数值小的在前面
8.Flex-grow

CSS3弹性盒模型01_第13张图片
Flex-grow
CSS3弹性盒模型01_第14张图片
image.png
CSS3弹性盒模型01_第15张图片
image.png

9.Flex-shrink

CSS3弹性盒模型01_第16张图片
Flex-shrink

10.Flex-basis

CSS3弹性盒模型01_第17张图片
Flex-basis

11.Flex

CSS3弹性盒模型01_第18张图片
Flex

12.Align-self

CSS3弹性盒模型01_第19张图片
Align-self

你可能感兴趣的:(CSS3弹性盒模型01)