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

本文介绍了如何在父盒子宽度不固定的情况下,利用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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值