display:flex
让弹性盒元素在必要的时候拆行
display:flex; flex-wrap:wrap
浏览器支持
image.png
css 语法
flex-wrap:nowrap | wrap | wrap-reverse | initial | inherit ;
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
justify-content
浏览器支持
image.png
CSS语法
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
text-size-adjust
css 语法
text-size-adjust:auto | none |<percentage>;
| 值 | 描述 |
|---|---|
| auto | 文本大小根据设备尺寸进行调整 |
| none | 文本大小不会根据设备尺寸进行调整 |
| <percentage> | 用百分比来指定文本大小在设备尺寸不同的情况下如何调整 |
说明
检索或设置移动端页面中对象文本的大小调整
1.该属性只在移动设备上生效
2.如果你的页面没有定义 meta viewport，此属性定义将无效；
3.对应的脚本特性为 textSizeAdiust。
