-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1行CSS实现10种经典布局 #12
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1行CSS实现9种时髦的布局
这篇文章将教你使用如何用一行魔法般的 CSS 来实现 9 种时髦的布局。
你将学会如下 CSS 的用法:
place-items: center
flex: 0 1 <baseWidth>
grid-template-columns: minmax(<min>, <max>) ...
grid-template-rows: auto 1fr auto
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
clamp(MIN, VAL, MAX)
aspect-ratio: <width> / <height>
1. 居中对齐
实现居中对齐你也许有很多种方法,但你试过下面这种方法吗?
place-items
为align-items
和justify-content
的简写形式,可以有两个值place-items: center center
。Online 示例
2. 布局解构
一个三列布局在 web 端并排显示,但是在移动端需要堆叠显示,这是一个很常见的需求。你可以很容易使用
@media
来实现,但你试过下面这种方法吗?flex
属性是 [<flex-grow>
,<flex-shrink>
,<flex-basis>
] 的简写,默认值为0 1 auto
。当
flex
取三值语法时:<flex-grow>
:增长系数,无单位数,它指定了 flex 容器中剩余空间的多少应该分配给项目,如果所有的兄弟项目都有相同的 flex-grow 系数,那么所有的项目将获得相同的剩余空间,否则将根据不同的 flex-grow 系数定义的比例进行分配。。<flex-shrink>
:收缩系数,无单位数,当默认宽度之和大于容器的时候才会发生收缩。<flex-basis>
:必须为一个有效的宽度值,可以是百分比,它指定了 flex 元素在主轴方向上的初始大小。flex: 1 1 100px;
表示:.child
宽100px
,300px
时,每一个.child
将按同等比例分配多出来的宽度300px
时,.child
将进行收缩,由于父元素设置了flex-wrap: wrap
,所以这里的.child
不会在同一行一直收缩,而是会出现换行情况200px
时,一行只能放下两个.child
,所以第三个元素换行,前两个元素继续按照<flex-shrink>
进行收缩200px
时,一行只能放下一个.child
,即实现了窄屏堆叠样式效果注:示例中有 padding 和 margin 暂且忽略。
Online 示例
3. 侧边栏宽度自适应
侧边栏限制一个最大宽度和最小宽度,然后根据容器宽度动态调整侧边栏宽度如何实现?你可以很轻松的用
min-width
实现,但你试过下面这种方法吗?Online 示例
4. footer 紧贴页面底部
一个非常常见的需求,内容少时
footer
在浏览器底部,内容多时footer
在body
底部,现在已经有很成熟的方案实现该功能,但你试过下面这种方法吗?Online 示例
5. 经典的圣杯布局
圣杯布局
你试过下面这种方法吗?
该方法主要是在 grid 圣杯基础上,增加了横向自适应,使得左右侧边栏更加灵活。
Online 示例
6. span grid自适应布局
自适应布局很容易用百分比形式实现,但你试过下面这种方法吗?
span
表示“跨越”,即左右边框(上下边框)之间跨越多少个网格。Online 示例
7. RAM 布局
实现和2. 布局解构相同的效果,但我们尝试用下面这种方法:
这里的 RAM 表示
repeat
、auto
、minmax
。Online 示例
8. clamp() 实现响应式布局
你可以很容易用
min-width
和max-width
结合width: 50%
的方式实现一个响应式布局,但你试过下面这种方法吗?clamp(<min>, <preferred>, <max>)
表示取三个参数中的中间值作为值。Online 示例
9. 固定长宽比缩放
这样的需求很常见,一张图片内容随着浏览器的宽高响应式变化,但要保证图片的宽高比不变。实现方法可能让你感到头疼,可以参看css等比例缩放盒子,也许你还有其它方式实现,但你试过下面这种方法吗?
注:aspect-ratio 只支持 chrome 84+ 。
Online 示例
The text was updated successfully, but these errors were encountered: