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

演讲者：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/ 。