css常见布局

//结构
<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;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值