【Chrome web.dev Live 2020总结】第3天第3集:1行CSS中的10种现代布局

举报
华为云官网技术团队 发表于 2020/07/22 17:26:39 2020/07/22
【摘要】 在演讲中,Una首先强调了一些有关于网格布局及弹性布局的关键术语,以及它们所代表的含义与功能,接着用show case的方式演示了其使用方法,证实了使用一行代码就可以编写整个布局的观点。

演讲者:Una, Google web 开发工程师,专注于css与Ux(用户体验)的研究

主讲两大布局:网格布局:display:grid ; 弹性布局:display:flex  ;

关键术语:1.fr、auto、minmax()、min()、max() 、clamp()、auto-fill、auto-fit

Case 1:超级中心

display:grid; // 指定布局方法

place-items:center; //该属性作用于项目上,称之为绝对居中布局,解决中心困境

Case 2:解构煎饼(响应式设计无需媒体查询)

display:flex; // 指定布局方法

flex:0 1 150px; //该属性作用于项目上,是flex-grow,flex-shrink,flex-basis三个属性的简写形式。

Case 3:侧边栏型

grid-template-columes:定义每一列的列宽 

minmax():设置指定列的最大值与最小值

fr:fraction的缩写,如果两列布局分别设置为1fr 2fr,即代表后者的宽度是前者的两倍,也可以跟绝对长度单位一起使用

Tip:想要了解更多有关于Case List中的细节自行前往Una的1-Line网站: https://1linelayouts.glitch.me/ 。

 


【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容, 举报邮箱:cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。