display:flex 和 justify-content 和text-size-adjust

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 |;

值	描述
auto	文本大小根据设备尺寸进行调整
none	文本大小不会根据设备尺寸进行调整
	用百分比来指定文本大小在设备尺寸不同的情况下如何调整

说明

检索或设置移动端页面中对象文本的大小调整
1.该属性只在移动设备上生效
2.如果你的页面没有定义 meta viewport，此属性定义将无效；
3.对应的脚本特性为 textSizeAdiust。