当浏览器屏幕正常全屏显示时，屏幕中的盒子排布正常；但当浏览器屏幕大小发生变化到某种情况时，浏览器屏幕中的盒子的排布会发生相应的变化。

例如，正常浏览器窗口时两个盒子并排且宽度各占一半，当浏览器屏幕的宽度小于1000px时，则让两个盒子分为上下排序，且宽度占当前屏幕的100% html部分：

style部分：

CSS布局文档 flex-wrap：用来确定项目元素是否换行展示。当所有item在主轴（假设主轴为水平方向flex-direction:row）的宽度之和超过容器的大小，可以用flex-wrap决定是否换行显示。

● flex-wrap: no-wrap ：表示不换行（当项目的宽度超出时，会自动缩小item的宽度，确保他们都显示在一行） ● flex-wrap: wrap ：表示换行（当子项目的宽度之和超出父容器宽度时，就会另起一行） ● flex-wrap: wrap-reverse ：表示换行，方向于wrap相反。

@media宽度文档

使用width CSS@media媒体特性来应用基于viewport宽度（或页面框，用于分页媒体）的样式。 可以使用前缀min-width和max-width变量分别查询最小值和最大值。

(若同时对宽度width和高度height判断，可以使用and操作符) 例子：判断高度小于500px且宽度大于600px