CSS那些厉害的布局方法

1.超级居中(水平和垂直都居中)

只需要给外层父级元素加上下面代码

复制代码
.parent{
   display: grid;
   place-items: center;
}

2.经典的sidebar布局

复制代码
.parent{
    display: grid;
    grid-template-columns: minmax(150px,25%) 1fr;
}

3.固定的header和footer,中间的内容自适应

复制代码
.parent{
    display: grid;
    grid-template-rows:auto 1fr auto;
}

一些brankproint

相关推荐
Younglina1 分钟前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen6 分钟前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基7 分钟前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript
peachSoda715 分钟前
前端想转AI全栈-初步练习记录
前端·人工智能
树上有只程序猿16 分钟前
低代码平台选型指南,10 款热门工具对比
前端·后端
@PHARAOH17 分钟前
WHAT - 硬链接 hard link 和软链接 symlink
前端
cyforkk28 分钟前
前端限流实战:从 429 状态码处理到消除“双重报错”
前端·状态模式
陈林梓1 小时前
Qiankun 微前端配置详解
前端
英俊潇洒美少年1 小时前
Vue3 的 JSX 函数组件,每次更新都会重新运行吗?
前端·javascript·vue.js