一、移动端项目使用弹性布局
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 的简写 |
网友评论