弹性盒子(display:flex)

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属性的复合属性

告诉大家一声:不是我的东西不全,一般写样式用的就前边几种
其他的方法没必要非得学会
一般用不到 ^_^