1.属性flex-direction
:指定了弹性容器中子元素的排列顺序
属性值:
row
;(默认值) 水平显示,一行排列row-reverse
;与row排列顺序相反column
;垂直显示一列显示column-reverse
;与column排列顺序相反initial
;设置该属性为它的默认值inherit
;从福原色继承该属性
2.属性justify-content
:设置弹性盒子元素在主轴(横)方向上的对齐方式
属性值:
flex-start
(默认) 项目位于容器开头flex-end
项目位于容器的结尾center
项目位于容器中心space-between
项目平均分布两端对齐space-around
项目位于隔行之前,之间,之后都留有空白
3.属性align-items
设置弹性盒子元素在侧轴(纵轴)上的对齐方式
属性值:
stretch
(默认)元素被拉伸以适应容器center
元素位于容器中心flex-start
元素位于容器开头flex-end
位于容器结尾baseline
位于容器基线与flex-start
等效
4.属性flex-wrap
设置弹性盒子的子元素超出父元素是否换行
属性值:
nowwrap
(默认)不换行或者不换列wrap
规定超出换行或者换列wrap-reverse
规定项目拆行或者拆列,但是以相反的顺序
5.属性align-content
修改flex-wrap属性的行为,类似align-items
,不设置子元素对齐,而是设置行对齐
属性值:
stretch
默认值,元素被拉伸以适应容器center
位于容器中心flex-start
位于容器开头flex-end
位于容器结尾space-between
位于各行之间留有空白的容器内space-around
位于各行之前,之后,之间都留有空白的容器内
6.属性flex-flow
是flex-direction
和flex-wrap
属性的复合属性
告诉大家一声:不是我的东西不全,一般写样式用的就前边几种
其他的方法没必要非得学会
一般用不到 ^_^