移动端布局技巧

一、移动端项目使用弹性布局

    display:flex; 
    display:-webkit-flex;  

justify-content css 语法

    justify-content:space-between;
    -webkit-justify-content:space-between(水平)
    justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
详解见上一篇

align-items css 语法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

值	描述
stretch	默认值。元素被拉伸以适应容器
center	元素位于容器的中心
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
baseline	元素位于容器的基线上
initial	设置该属性为它的默认值
inherit	从父元素继承该属性

flex-wrap css语法

flex-wrap:nowrap | wrap | wrap-reverse | initial | inherit ;

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列
wrap	规定灵活的项目在必要的时候拆行或拆列
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序
initial	设置该属性为它的默认值
inherit	从父元素继承该属性

css3 多列属性

属性	描述
column-count	指定元素应该被分割的烈数。column-count:3;
column-fill	指定如何填充列
column-gap	指定列与列之前的间隙 column-gap:40px;
column-rule	所有column-rule-* 属性的简写 column-rule:1px solid lightblue;
column-rule-color	指定两列间边框的颜色 column-rule-color:lightblue;
column-rule-style	指定两列间边框的样式 column-rule-style:solid;
column-rule-width	指定两列间边框的厚度 column-rule-width:1px;
column-span	指定元素要跨越多少列 column-span:all;
column-width	指定列的宽度 column-width:100px;
columns	设置 column-width 和column-count 的简写