使用flex-wrap收缩DIV

使用flex-wrap属性可以控制flex容器中的flex项目在一行排列不下时是否换行。它有以下几个取值：

1. nowrap（默认值）：不换行，所有flex项目在一行上排列，可能会导致溢出容器。
2. wrap：换行，当flex项目在一行排列不下时，会自动换行到下一行。
3. wrap-reverse：反向换行，与wrap相反，当flex项目在一行排列不下时，会从下一行开始排列。

使用flex-wrap属性可以实现以下效果：

1. 创建多列布局：通过设置flex-wrap为wrap，可以实现将flex项目按照指定的列数进行排列，适用于创建多列布局的场景。
2. 自适应布局：通过设置flex-wrap为wrap，可以让flex项目根据容器的宽度自动调整大小和位置，适用于响应式布局的场景。
3. 瀑布流布局：通过设置flex-wrap为wrap，结合设置flex项目的宽度和高度，可以实现瀑布流布局效果，适用于展示图片、商品等多个不同高度的元素的场景。

腾讯云相关产品和产品介绍链接地址：

腾讯云提供了云服务器（CVM）和云函数（SCF）等产品，可以用于搭建和部署云计算应用。具体产品介绍和使用方法可以参考以下链接：

1. 腾讯云云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。了解更多：腾讯云云服务器（CVM）
2. 腾讯云云函数（SCF）：无服务器计算服务，支持事件驱动的函数计算。了解更多：腾讯云云函数（SCF）