wrap-reverse
, Flex itms
会被按照从左到右从下到上的顺序在多行中显示。
默认值:nowrap
注:这个属性也跟书写模式相关。
flex-flow
这个属性是flex-direction
和flex-wrap
属性的缩写。
例子:
.flex-container { -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */ flex-flow: <flex-direction> || <flex-wrap>; }
默认值:row nowrap
justify-content
这个属性会根据当前容器的主轴来排列子元素。它可以在所有flex items都在同一行并且不可伸缩,或是可伸缩但是达到它们的最大尺寸时候,分配剩余空间。
例子:
.flex-container { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; }
Flex items
在lrt
上下文中会向左边靠拢
.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }
Flex items
在ltr
上下文中向右靠拢
.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }
Flex items
会居中
.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }
除了第一个和最后一个,Flex items
会有相同的间隔。
.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }
所有Flex item
都会有相同间隔
默认值: flex-start
align-items
Flex items
会根据当前容器的主轴线对齐,跟justify-content
很相似,但是方向垂直。
这个属性设置所有flex items
默认对齐方式。
例子:
.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch; }
Flex items
会占满flex container
的高度,从cross start到cross end
.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }