任何一个容器都可以指定为Flex布局:
块级元素display:flex; 行内元素display:inline-flex; webkit内核浏览器加上display:-webkit-flex;
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
以下6个属性设置在容器上:
(1)flex-direction
决定主轴的方向
Flex-direction: row | row-reverse | column | column-reverse;
(2)flex-wrap
决定换行
Flex-wrap: nowrap | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方)
(3)flex-flow
该属性是flex-direction和flex-wrap属性的简写,默认值是row nowrap;
(4)justify-content
定义了项目在主轴上的对齐方式
Justify-content: flex-start(左对齐) | flex-end | center | space-between(两端对齐) | space-around;
(5)align-items
定义了项目在交叉轴上的对齐方式
Align-items: flex-start | flex-end | center | baseline | stretch;
(6)align-content
定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用
Align-content: flex-start | flex-end | center | space-between | space-around | stretch;
以下6个属性设置在项目上:
(1)order
定义项目的排列顺序,数值越小,排列越靠前,默认为0
(2)flex-grow
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
(3)flex-shrink
定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
(4)flex-basis
定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
(5)flex
flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。
(6)align-self
该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。