flex-wrap 设置子元素是否换行

最新推荐文章于 2024-06-01 22:13:58 发布

MDR_0820

最新推荐文章于 2024-06-01 22:13:58 发布

阅读量1.4k

点赞数 1

文章标签： css html5 html css3 移动开发

本文链接：https://blog.csdn.net/MDR_0820/article/details/120661624

版权

本文详细介绍了CSS的flex-wrap属性，用于决定flex容器中的子元素是否换行。当设置为nowrap时，即使容器空间不足，子元素也会尝试不换行并缩小自身宽度以适应；而设置为wrap时，子元素会在空间不足时自动换行。

摘要由CSDN通过智能技术生成

flex-wrap 设置子元素是否换行

flex-wrap: nowrap; 为默认值不换行如果父盒子装不开会缩小子元素的宽度硬是在一行排列
flex-wrap: wrap; 宽度不够另起一行显示

  div{
   
            display: flex;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 100px auto;
            /* flex-wrap: nowrap; 为默认值  不换行 如果父盒子装不开 会缩小子元素的宽度 硬是在一行排列 */
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; 另起一行显示  */
            flex-wrap: wrap;