css Flex容器属性有哪些-css教程-Python学习网

1、flex-direction设置主轴的方向

即项目的排列方向。

1	`flex-direction: row \| row-reverse \| column \| column-reverse;`

2、flex-wrap

默认情况下，item都排在一条线（又称”轴线”）上。flex-wrap属性定义了，如果一条轴线排不下，item的换行方式。

1	`flex-wrap:` `nowrap` `\| wrap \| wrap-reverse;`

3、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4、justify-content

定义了项目在主轴上的对齐方式。

1	`justify-content: flex-start \| flex-end \|` `center` `\| space-between \| space-around;`

5、align-items

设置了项目在交叉轴上的对齐方式。

1	`align-items: flex-start \| flex-end \|` `center` `\|` `baseline` `\| stretch`

6、align-content

多根轴线的对齐方式。

1	`align-content: flex-start \| flex-end \|` `center` `\| space-between \| space-around \| stretch;`

以上就是css Flex容器6种属性的介绍，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

css Flex容器属性有哪些