云社区 博客 博客详情
云社区 博客 博客详情

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

华为云官网技术团队 发表于 2020-07-22 17:26:39 07-22 17:26
华为云官网技术团队 发表于 2020-07-22 17:26:39 2020/07/22
0
0

【摘要】 在演讲中,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/ 。

 


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消