容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1、flex-direction
属性决定主轴的方向(即项目的排列方向 水平和竖直各两个方向):
.box { flex-direction: row | row-reverse | column | column-reverse;
justify-content属性:
}
2、flex-wrap属性:
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。nowrap表示不换行,wrap换行第一行在上方,wrap-reverse表示第一行在下方
3、flex-flow属性:flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
4、justify-content
属性定义了项目在主轴上的对齐方式。
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右flex-start
(默认值):左对齐、flex-end
:右对齐、center
: 居中、space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5、
align-items属性:align-items
属性定义项目在交叉轴上如何对齐。
6、align-content属性:align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。