flex布局container:flex-wrap,align-contend(换行显示以及操作多行之间的间隙)

最新推荐文章于 2023-12-12 18:23:00 发布

leigangg

最新推荐文章于 2023-12-12 18:23:00 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/leigangg/article/details/104377714

版权

本文介绍了Flex布局中的`flex-wrap`属性，用于实现元素的多行显示。当空间不足时，`flex-wrap`避免了元素压缩，而是将其换行排列。同时，文章探讨了`align-content`属性如何控制多行内容之间的间隔，提供了代码示例展示其效果。

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

:flex-wrap

:flex-wrap用于多行显示
:items默认是在container中同一行显示,如果空间不够,那么他会把items进行压缩.(缩小)
想要解决这个问题我们就需要用到:flex-wrap属性,:

    <style>
        .test{
   
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
            /* flex-wrap: nowrap;默认值是nowrap,在同一行显示 */
            flex-wrap: wrap;/*多行显示*/
        }
        .box{
   
            height: 100px;
            width: 100px;
        }
        .box1