【Chrome web.dev Live 2020总结】第3天第3集:1行CSS中的10种现代布局
【摘要】 在演讲中,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)