父盒子宽度不固定水平居中子元素弹性布局

最新推荐文章于 2023-09-12 10:23:21 发布

xiangshj

最新推荐文章于 2023-09-12 10:23:21 发布

阅读量608

点赞数

文章标签： html flex css3

本文链接：https://blog.csdn.net/xiangshj/article/details/110083522

版权

本文介绍了如何在父盒子宽度不固定的情况下，利用CSS Grid布局实现内部子元素水平居中且弹性排列。通过grid布局，解决了父盒子行为控制的问题，满足了内容区域的间隔比例需求。关键代码示例给出，并推荐了阮一峰老师的CSS Grid教程作为参考。

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

grid布局

最近开发遇到一个简单的布局需求，尝试了几次总达不到ui的需求；
需求如下：
1.父盒子宽度不固定，内部有多个宽度固定的子元素组成，要求父盒子始终水平居中，内部元素随着宽度的变化，排列个数自动变化的弹性布局；
2. 整个内容区域上下间隔之比为1：2（这一步一般是不需要的，但是万恶的ui设计，这次需求恰巧有这需求，同理内容高度也是可以去掉的）；

很显然这种布局方式，单纯的flex肯定是不满足的，因为flex布局主要是针对子元素的布局做出相应的调整的，而对父盒子的行为无法控制，好在弹性布局除了felx，同样的有另外一种表格布局grid可以达到目的，二话不说直接上代码；
ps：核心代码只需要参考.parent和.son就行
css部分：

  .f{
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .t{
        flex: 1 1 auto;
    }
    .parent{
        display: grid;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        justify-content:center;
        width: 100%;
        overflow-y: auto;
        flex: 0 0 600px;
    }
    .b{
        flex: 2 2 auto