nagenage123的博客

css 快速入门教程 - Grid 网格布局教程学习 grid 时，需要先了解 grid 的一些重要术语。CSS Grid 网格布局 - 重要属性 属性 描述 设置在网格容器上 display display grid 或者 inline-grid 声明元素为网格容器 行和列 grid-template-columns 设置网格列 grid-template-rows 设置网格行 网格排序 grid-aut

CSS Grid 网格布局 - auto-fit 关键字 和 auto-fill 关键字 的区别auto-fit 和 auto-fill 都是模式填充，在网格容器宽度大于网格项的最小宽度总和时就会有区别。实例解析：css.css :.wrap{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: 60px; grid-auto-rows: 60px;

css 快速入门之 flex 布局教程flex 简称弹性布局，是2009年W3C提出的 css3 新属性。弹性布局（flexible box）模块旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。 最重要的是弹性盒子布局与方向无关，相对于常规的布局（块是垂直和内联水平为基础），很显然，这些工作以及网页设计缺乏灵活性，无法支持大型

网格区域的命名会影响网格线的命名。当给区域命名后，区域2条边会自动得到命名 “-start” 和 “-end”。这意味着一条网格线可能有多个名称。比如以下 ：.wrap{ display: grid; grid-template-areas:'header header header' 'sidebar main main' 'footer footer footer';}区域名称相同的，在使用时就像单元格合并，如以上的 main ，其上边行线和左边列线为 main-s