css常见布局

最新推荐文章于 2025-02-11 12:18:01 发布

Lemon今天学习了吗

最新推荐文章于 2025-02-11 12:18:01 发布

阅读量285

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_47978760/article/details/124964733

版权

css 专栏收录该内容

4 篇文章

订阅专栏

//结构
<body>
    <div class="father">
        <div class="son son1" ></div>
        <div class="son son2" ></div>
        <div class="son son3" ></div>
    </div>
</body>

布局一：超级居中。内容能够在父级内完美居中，而不管内部大小。

方式一：父标签采用grid布局+place-items:center方式

方式二：父标签采用grid布局，子标签place-self:center方式

布局二：解构煎饼式布局。不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。

.father {
    width: 100%;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;    /* 可换行 */
    justify-content: center;
}
.son {
    width: 50px;
    height: 50px;
    flex: 0 1 50px;   /* flex: <flex-grow> <flex-shrink> <flex-basis> */
    margin: 5px;
}

换到下一行时拉伸并填充空间，将 <flex-grow> 设置为 1，即flex: 0 1 50px;