拓冰网站定制 
示例工程【免费下载链接】solved-by-flexboxA showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.项目地址https://gitcode.com/gh_mirrors/so/solved-by-flexbox点击查看免费下载本文以 demos/grids.md 为骨架结合仓库中真实的组件源码与工具类系统讲解如何用 Flexbox 取代 float 与 inline-block 实现一套默认等宽等高、按需定制、天然支持响应式与垂直对齐、可无限嵌套的网格系统。读完本文你将掌握Grid/Grid-cell的核心用法、全部尺寸与对齐修饰符、移动优先的响应式写法以及这套组件在仓库源码层面的实现细节。为什么传统网格系统让人头疼绝大多数传统网格系统都建立在float或inline-block之上但这两种布局手段最初都不是为页面布局设计的因此带着一系列显著的问题与局限float 需要清除浮动。清理浮动本身会带来一堆布局问题最臭名昭著的是清除某个元素时有时会把它推到页面某个不相关部分的下面。此外清除浮动通常要同时使用::before和::after两个伪元素导致你没法再用伪元素做其他事情比如自定义控件样式。inline-block 必须处理内联元素之间的空白。inline-block元素之间的空白符会被渲染成可见间隙而解决这个问题的各种方案要么很 hacky要么很烦人还要在源码里加注释专门解释。Flexbox 不仅彻底消除了这两类问题还打开了一扇全新的可能性之门——下面的网格演示就是一个完整的实践样本对应 assets/images/grids.jpgFlexbox 网格系统的设计目标网格系统通常带有一大堆尺寸选项但在绝大多数场景下你只是想让两三个元素并排展示。既然如此为什么要求我们在每一个单元格上都写上尺寸类基于这个思考文档列出了理想网格系统应满足的几条标准而用 Flexbox 实现时其中大部分能力是免费获得的默认等宽等高默认情况下网格中每个单元格与同行其他单元格宽度、高度一致即按内容自适应尺寸。细粒度尺寸控制可以给单个单元格添加尺寸类做精细控制不加尺寸类的单元格照常平分剩余空间。响应式支持可以给单元格添加媒体查询专属的类实现断点切换。单元格级垂直对齐单个单元格可以顶部、底部或居中对齐。容器级批量设置当整行所有单元格需要相同的尺寸、媒体或对齐值时只需在容器上添加一个类即可避免无谓的重复。无限嵌套网格可以按需嵌套任意多层。最小骨架两行 CSS 的等宽等高网格先看最基础的结构文档HTML与CSS两节的原始内容div classGrid div classGrid-cell…/div div classGrid-cell…/div div classGrid-cell…/div /div.Grid { display: flex; } .Grid-cell { flex: 1; }仅这两条规则就构成了网格的全部基础能力.Grid声明为 flex 容器.Grid-cell是它的 flex 子项flex: 1让每个单元格按相同比例分配主轴剩余空间于是不写任何宽度的单元格也会自动等分整行并默认拉伸到同一高度。在仓库的真实源码 assets/css/components/grid.css 中.Grid还补充了几条防御性声明.Grid { display: flex; flex-wrap: wrap; /* 允许单元格换行防止溢出 */ list-style: none; /* 兼容 ul 语义的网格列表 */ margin: 0; padding: 0; }其中flex-wrap: wrap尤其重要它让超出容器宽度的单元格自动换到下一行而不是被压缩或溢出这也是它能安全支持1/2 1/2、1/3 1/3 1/3等任意组合的前提。基础网格默认等分天然等高不指定任何宽度的单元格会自然等分整行并展开填满整行同时它们默认等高。文档提供了四组最典型的用法演示单元格使用仓库的.Demo样式见 assets/css/components/demo.css两个单元格 → 各占 1/2三个单元格 → 各占 1/3四个单元格 → 各占 1/4加上Grid--flexCells修饰符后即使某格内容很少也会拉伸到与同行最高单元格等高Full-height, even when my content doesnt fill the space。前三种的标记完全一致只是单元格数量不同div classGrid Grid--gutters u-textCenter div classGrid-cell div classDemo1/3/div /div div classGrid-cell div classDemo1/3/div /div div classGrid-cell div classDemo1/3/div /div /divu-textCenter来自 main.css 引入的suitcss-utils-text工具集见 assets/css/main.css用于让演示文字居中Grid--gutters则是间距修饰符下文详解。等高效果背后的原理是 flex 容器默认的align-items: stretch——单元格在交叉轴上被拉伸到与最高者一致。而当你想让单元格内部的内容如按钮、媒体对象也参与 flex 布局时可以给容器追加Grid--flexCells.Grid--flexCells .Grid-cell { display: flex; }这在源码 assets/css/components/grid.css 中实现把单元格本身再变成 flex 容器其内容即可享受等高拉伸下的 flex 布局能力。单个单元格尺寸控制auto 与 u-1ofN 混排当等分宽度不是你想要的可以给单个单元格加尺寸类没有尺寸类的单元格照常平分剩余空间。文档展示了三种混排div classGrid Grid--gutters u-textCenter div classGrid-cell u-1of2 div classDemo1/2/div /div div classGrid-cell div classDemoauto/div /div div classGrid-cell div classDemoauto/div /div /div即1/2 auto auto此外还演示了auto 1/3、1/4 auto 1/3两种组合。这些u-1ofN尺寸类定义在工具文件 assets/css/utils/media.css 中例如.u-1of2 { width: 50% !important; flex: none !important; } .u-1of3 { width: 33.3333% !important; flex: none !important; } .u-1of4 { width: 25% !important; flex: none !important; }关键点是两条规则缺一不可width以百分比锁定单元格的精确宽度flex: none等价于flex: 0 0 auto禁止单元格再参与伸缩从而保证它严格按设定宽度渲染剩余空间才轮到那些没加类的 auto 单元格去瓜分。工具集中还提供了u-full100%、u-2of366.6667%、u-3of475%等更多档位供你在实际项目里按需取用。响应式网格移动优先的断点类响应式网格的做法是给单元格或容器添加带断点前缀的类当媒体查询条件满足时自动生效。文档演示的响应式示例为默认全宽Grid--full在较大屏幕≥48em缩为均分large-Grid--fitdiv classGrid Grid--gutters Grid--full large-Grid--fit u-textCenter div classGrid-cell div classDemoFull / Halves/div /div div classGrid-cell div classDemoFull / Halves/div /div /div第二组是三列版Full / Thirds。缩窄浏览器窗口即可看到两列/三列逐步折叠为单列全宽的过程。文档给出的响应式修饰符采用**移动优先mobile-first**写法基础类对所有媒体生效再逐级放大覆盖/* 基础类对所有媒体生效 */ .Grid--fit .Grid-cell { flex: 1; } .Grid--full .Grid-cell { flex: 0 0 100%; } .Grid--1of2 .Grid-cell { flex: 0 0 50% } .Grid--1of3 .Grid-cell { flex: 0 0 33.3333% } .Grid--1of4 .Grid-cell { flex: 0 0 25% } /* 小屏到中屏 */ media (min-width: 24em) { .small-Grid--fit .Grid-cell { flex: 1; } .small-Grid--full .Grid-cell { flex: 0 0 100%; } .small-Grid--1of2 .Grid-cell { flex: 0 0 50% } .small-Grid--1of3 .Grid-cell { flex: 0 0 33.3333% } .small-Grid--1of4 .Grid-cell { flex: 0 0 25% } } /* 大屏 */ media (min-width: 48em) { .large-Grid--fit .Grid-cell { flex: 1; } .large-Grid--full .Grid-cell { flex: 0 0 100%; } .large-Grid--1of2 .Grid-cell { flex: 0 0 50% } .large-Grid--1of3 .Grid-cell { flex: 0 0 33.3333% } .large-Grid--1of4 .Grid-cell { flex: 0 0 25% } }注意flex: 0 0 100%的写法flex-grow为 0不增长、flex-shrink为 0不收缩、flex-basis为 100%基础宽度占满整行因此多个带Grid--full的单元格会各自占满一行、上下堆叠而flex: 1则让它们恢复均分并排。仓库源码与文档的对应关系真实组件 assets/css/components/grid.css 结构一致但断点使用 PostCSS 自定义媒体查询定义在 assets/css/base/custom-media.csscustom-media --break-sm (min-width: 384px); custom-media --break-md (min-width: 576px); custom-media --break-lg (min-width: 768px);即源码中的--break-sm384px对应文档的 24em、--break-lg768px对应 48em按 16px 根字号换算此外源码还多了一档med-Grid--*576px并提供了small-/med-/large-三档前缀。若你的构建工具支持custom-media如 PostCSS custom-media 插件可以直接复用源码这套变量化断点否则按文档写成字面量min-width即可。Grid-ception网格无限嵌套网格组件可以在其他网格组件内部无限嵌套。文档中的嵌套示例外层 1/3 1/3内层再套 1/3、1/2结构大致如下div classGrid Grid--gutters Grid--flexCells u-textCenter div classGrid-cell div classDemo div classGrid Grid--gutters u-textCenter div classGrid-cell u-1of3…1/3…/div div classGrid-cell div classGrid Grid--gutters u-textCenter div classGrid-cell…1/2…/div div classGrid-cell…1/2…/div /div /div /div /div /div div classGrid-cell u-1of3…1/3…/div /div嵌套之所以能如此自由是因为.Grid本身就是display: flex的普通块级盒子Grid-cell内的内容天然可以作为新的网格容器加上源码里.Grid的flex-wrap: wrap与盒模型重置多层嵌套也不会引入额外的浮动或清除问题。任何深度的嵌套只需照搬同一套类名约定即可。垂直对齐从整行到单个单元格这是 float/inline-block 网格几乎做不到、而 Flexbox 一行属性就能完成的能力。整行对齐容器级给容器加一个类即可控制整行所有单元格的垂直对齐方式对应align-items/* 整行对齐 */ .Grid--top { align-items: flex-start; } .Grid--bottom { align-items: flex-end; } .Grid--center { align-items: center; }文档中的三个示例分别用Grid--top、Grid--bottom、Grid--center配合一个内容很长、一个内容很短的单元格直观展示短内容贴顶 / 贴底 / 垂直居中于长内容的效果。单个单元格对齐单元格级当一行中不同单元格需要各自不同的对齐方式时使用单元格级修饰符对应align-self/* 单个单元格对齐 */ .Grid-cell--top { align-self: flex-start; } .Grid-cell--bottom { align-self: flex-end; } .Grid-cell--center { align-self: center; }文档的 Mixed Vertical Alignment 示例正是混用三者第一个单元格Grid-cell--top贴顶、中间的Grid-cell--center居中、最后的Grid-cell--bottom贴底而中间的普通单元格保持默认拉伸。align-self会覆盖容器级align-items的设定因此这两种层级可以自由组合。源码里的更多修饰符除文档提及的类外assets/css/components/grid.css 还实现了几个值得了解的能力.Grid--justifyCenter { justify-content: center; /* 主轴居中整行单元格水平居中 */ } .Grid-cell--autoSize { flex: none; /* 单元格按内容宽度渲染不参与伸缩 */ }以及一套完整的gutters间距体系。文档中的Grid--gutters用负外边距 内边距的经典技巧实现单元格之间的均匀沟槽.Grid--gutters { margin: -1em 0 1em -1em; } .Grid--gutters .Grid-cell { padding: 1em 0 0 1em; }原理容器左边/上边用负 margin 抵消首行首列的 padding每个单元格通过左/上 padding 留出1em沟槽flex-wrap: wrap保证换行后第二行的间距依然成立。仓库还提供了加宽档位Grid--guttersLg1.5em、Grid--guttersXl2em以及small-/med-/large-Grid--gutters*响应式变体见 assets/css/components/grid.css方便在不同断点切换间距密度。如何在本地查看这套网格演示该演示文档通过 frontmatter 中的template: default.html渲染进站点页面。想本地查看全部效果并交互调试可参照 README.md 的流程git clone https://github.com/philipwalton/solved-by-flexbox.git cd solved-by-flexbox # 安装依赖 npm install # 构建并在 http://localhost:4000 提供本地服务 npm start如需换端口可把端口号作为参数传入npm start -- -p 8080npm start除了构建与本地伺服还会监听文件变化并增量重建刷新浏览器即可即时看到改动效果——你可以把本文讲解的类名、尺寸档位和断点值直接改到 demos/grids.md 与 assets/css/components/grid.css 中反复试验从而真正吃透这套 Flexbox 网格的每个细节。赞分享示例工程【免费下载链接】solved-by-flexboxA showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.项目地址https://gitcode.com/gh_mirrors/so/solved-by-flexbox点击查看免费下载相关推荐Flexbox布局的栅格系统设计solved-by-flexbox项目的Grid组件Flexbox布局的栅格系统设计solved by flexbox项目的Grid组件 你是否还在为CSS布局中的栅格系统头疼使用float布局需要清除浮动示例工程solved-by-flexbox单元测试确保Flexbox组件行为一致性solved by flexbox单元测试确保Flexbox组件行为一致性 在Web开发中Flexbox弹性盒子布局已成为构建灵活响应式界面的核心技术。示例工程用 Flexbox 实现完美的垂直居中Solved by Flexbox 项目 Aligner 组件深度解析用 Flexbox 实现完美的垂直居中Solved by Flexbox 项目 Aligner 组件深度解析 垂直居中一直是 CSS 历史上最让人头疼的问题之示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Solved by Flexbox Grid 组件全解析：用 Flexbox 构建更简单、更强大的网格系统
示例工程【免费下载链接】solved-by-flexboxA showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.项目地址https://gitcode.com/gh_mirrors/so/solved-by-flexbox点击查看免费下载本文以 demos/grids.md 为骨架结合仓库中真实的组件源码与工具类系统讲解如何用 Flexbox 取代 float 与 inline-block 实现一套默认等宽等高、按需定制、天然支持响应式与垂直对齐、可无限嵌套的网格系统。读完本文你将掌握Grid/Grid-cell的核心用法、全部尺寸与对齐修饰符、移动优先的响应式写法以及这套组件在仓库源码层面的实现细节。为什么传统网格系统让人头疼绝大多数传统网格系统都建立在float或inline-block之上但这两种布局手段最初都不是为页面布局设计的因此带着一系列显著的问题与局限float 需要清除浮动。清理浮动本身会带来一堆布局问题最臭名昭著的是清除某个元素时有时会把它推到页面某个不相关部分的下面。此外清除浮动通常要同时使用::before和::after两个伪元素导致你没法再用伪元素做其他事情比如自定义控件样式。inline-block 必须处理内联元素之间的空白。inline-block元素之间的空白符会被渲染成可见间隙而解决这个问题的各种方案要么很 hacky要么很烦人还要在源码里加注释专门解释。Flexbox 不仅彻底消除了这两类问题还打开了一扇全新的可能性之门——下面的网格演示就是一个完整的实践样本对应 assets/images/grids.jpgFlexbox 网格系统的设计目标网格系统通常带有一大堆尺寸选项但在绝大多数场景下你只是想让两三个元素并排展示。既然如此为什么要求我们在每一个单元格上都写上尺寸类基于这个思考文档列出了理想网格系统应满足的几条标准而用 Flexbox 实现时其中大部分能力是免费获得的默认等宽等高默认情况下网格中每个单元格与同行其他单元格宽度、高度一致即按内容自适应尺寸。细粒度尺寸控制可以给单个单元格添加尺寸类做精细控制不加尺寸类的单元格照常平分剩余空间。响应式支持可以给单元格添加媒体查询专属的类实现断点切换。单元格级垂直对齐单个单元格可以顶部、底部或居中对齐。容器级批量设置当整行所有单元格需要相同的尺寸、媒体或对齐值时只需在容器上添加一个类即可避免无谓的重复。无限嵌套网格可以按需嵌套任意多层。最小骨架两行 CSS 的等宽等高网格先看最基础的结构文档HTML与CSS两节的原始内容div classGrid div classGrid-cell…/div div classGrid-cell…/div div classGrid-cell…/div /div.Grid { display: flex; } .Grid-cell { flex: 1; }仅这两条规则就构成了网格的全部基础能力.Grid声明为 flex 容器.Grid-cell是它的 flex 子项flex: 1让每个单元格按相同比例分配主轴剩余空间于是不写任何宽度的单元格也会自动等分整行并默认拉伸到同一高度。在仓库的真实源码 assets/css/components/grid.css 中.Grid还补充了几条防御性声明.Grid { display: flex; flex-wrap: wrap; /* 允许单元格换行防止溢出 */ list-style: none; /* 兼容 ul 语义的网格列表 */ margin: 0; padding: 0; }其中flex-wrap: wrap尤其重要它让超出容器宽度的单元格自动换到下一行而不是被压缩或溢出这也是它能安全支持1/2 1/2、1/3 1/3 1/3等任意组合的前提。基础网格默认等分天然等高不指定任何宽度的单元格会自然等分整行并展开填满整行同时它们默认等高。文档提供了四组最典型的用法演示单元格使用仓库的.Demo样式见 assets/css/components/demo.css两个单元格 → 各占 1/2三个单元格 → 各占 1/3四个单元格 → 各占 1/4加上Grid--flexCells修饰符后即使某格内容很少也会拉伸到与同行最高单元格等高Full-height, even when my content doesnt fill the space。前三种的标记完全一致只是单元格数量不同div classGrid Grid--gutters u-textCenter div classGrid-cell div classDemo1/3/div /div div classGrid-cell div classDemo1/3/div /div div classGrid-cell div classDemo1/3/div /div /divu-textCenter来自 main.css 引入的suitcss-utils-text工具集见 assets/css/main.css用于让演示文字居中Grid--gutters则是间距修饰符下文详解。等高效果背后的原理是 flex 容器默认的align-items: stretch——单元格在交叉轴上被拉伸到与最高者一致。而当你想让单元格内部的内容如按钮、媒体对象也参与 flex 布局时可以给容器追加Grid--flexCells.Grid--flexCells .Grid-cell { display: flex; }这在源码 assets/css/components/grid.css 中实现把单元格本身再变成 flex 容器其内容即可享受等高拉伸下的 flex 布局能力。单个单元格尺寸控制auto 与 u-1ofN 混排当等分宽度不是你想要的可以给单个单元格加尺寸类没有尺寸类的单元格照常平分剩余空间。文档展示了三种混排div classGrid Grid--gutters u-textCenter div classGrid-cell u-1of2 div classDemo1/2/div /div div classGrid-cell div classDemoauto/div /div div classGrid-cell div classDemoauto/div /div /div即1/2 auto auto此外还演示了auto 1/3、1/4 auto 1/3两种组合。这些u-1ofN尺寸类定义在工具文件 assets/css/utils/media.css 中例如.u-1of2 { width: 50% !important; flex: none !important; } .u-1of3 { width: 33.3333% !important; flex: none !important; } .u-1of4 { width: 25% !important; flex: none !important; }关键点是两条规则缺一不可width以百分比锁定单元格的精确宽度flex: none等价于flex: 0 0 auto禁止单元格再参与伸缩从而保证它严格按设定宽度渲染剩余空间才轮到那些没加类的 auto 单元格去瓜分。工具集中还提供了u-full100%、u-2of366.6667%、u-3of475%等更多档位供你在实际项目里按需取用。响应式网格移动优先的断点类响应式网格的做法是给单元格或容器添加带断点前缀的类当媒体查询条件满足时自动生效。文档演示的响应式示例为默认全宽Grid--full在较大屏幕≥48em缩为均分large-Grid--fitdiv classGrid Grid--gutters Grid--full large-Grid--fit u-textCenter div classGrid-cell div classDemoFull / Halves/div /div div classGrid-cell div classDemoFull / Halves/div /div /div第二组是三列版Full / Thirds。缩窄浏览器窗口即可看到两列/三列逐步折叠为单列全宽的过程。文档给出的响应式修饰符采用**移动优先mobile-first**写法基础类对所有媒体生效再逐级放大覆盖/* 基础类对所有媒体生效 */ .Grid--fit .Grid-cell { flex: 1; } .Grid--full .Grid-cell { flex: 0 0 100%; } .Grid--1of2 .Grid-cell { flex: 0 0 50% } .Grid--1of3 .Grid-cell { flex: 0 0 33.3333% } .Grid--1of4 .Grid-cell { flex: 0 0 25% } /* 小屏到中屏 */ media (min-width: 24em) { .small-Grid--fit .Grid-cell { flex: 1; } .small-Grid--full .Grid-cell { flex: 0 0 100%; } .small-Grid--1of2 .Grid-cell { flex: 0 0 50% } .small-Grid--1of3 .Grid-cell { flex: 0 0 33.3333% } .small-Grid--1of4 .Grid-cell { flex: 0 0 25% } } /* 大屏 */ media (min-width: 48em) { .large-Grid--fit .Grid-cell { flex: 1; } .large-Grid--full .Grid-cell { flex: 0 0 100%; } .large-Grid--1of2 .Grid-cell { flex: 0 0 50% } .large-Grid--1of3 .Grid-cell { flex: 0 0 33.3333% } .large-Grid--1of4 .Grid-cell { flex: 0 0 25% } }注意flex: 0 0 100%的写法flex-grow为 0不增长、flex-shrink为 0不收缩、flex-basis为 100%基础宽度占满整行因此多个带Grid--full的单元格会各自占满一行、上下堆叠而flex: 1则让它们恢复均分并排。仓库源码与文档的对应关系真实组件 assets/css/components/grid.css 结构一致但断点使用 PostCSS 自定义媒体查询定义在 assets/css/base/custom-media.csscustom-media --break-sm (min-width: 384px); custom-media --break-md (min-width: 576px); custom-media --break-lg (min-width: 768px);即源码中的--break-sm384px对应文档的 24em、--break-lg768px对应 48em按 16px 根字号换算此外源码还多了一档med-Grid--*576px并提供了small-/med-/large-三档前缀。若你的构建工具支持custom-media如 PostCSS custom-media 插件可以直接复用源码这套变量化断点否则按文档写成字面量min-width即可。Grid-ception网格无限嵌套网格组件可以在其他网格组件内部无限嵌套。文档中的嵌套示例外层 1/3 1/3内层再套 1/3、1/2结构大致如下div classGrid Grid--gutters Grid--flexCells u-textCenter div classGrid-cell div classDemo div classGrid Grid--gutters u-textCenter div classGrid-cell u-1of3…1/3…/div div classGrid-cell div classGrid Grid--gutters u-textCenter div classGrid-cell…1/2…/div div classGrid-cell…1/2…/div /div /div /div /div /div div classGrid-cell u-1of3…1/3…/div /div嵌套之所以能如此自由是因为.Grid本身就是display: flex的普通块级盒子Grid-cell内的内容天然可以作为新的网格容器加上源码里.Grid的flex-wrap: wrap与盒模型重置多层嵌套也不会引入额外的浮动或清除问题。任何深度的嵌套只需照搬同一套类名约定即可。垂直对齐从整行到单个单元格这是 float/inline-block 网格几乎做不到、而 Flexbox 一行属性就能完成的能力。整行对齐容器级给容器加一个类即可控制整行所有单元格的垂直对齐方式对应align-items/* 整行对齐 */ .Grid--top { align-items: flex-start; } .Grid--bottom { align-items: flex-end; } .Grid--center { align-items: center; }文档中的三个示例分别用Grid--top、Grid--bottom、Grid--center配合一个内容很长、一个内容很短的单元格直观展示短内容贴顶 / 贴底 / 垂直居中于长内容的效果。单个单元格对齐单元格级当一行中不同单元格需要各自不同的对齐方式时使用单元格级修饰符对应align-self/* 单个单元格对齐 */ .Grid-cell--top { align-self: flex-start; } .Grid-cell--bottom { align-self: flex-end; } .Grid-cell--center { align-self: center; }文档的 Mixed Vertical Alignment 示例正是混用三者第一个单元格Grid-cell--top贴顶、中间的Grid-cell--center居中、最后的Grid-cell--bottom贴底而中间的普通单元格保持默认拉伸。align-self会覆盖容器级align-items的设定因此这两种层级可以自由组合。源码里的更多修饰符除文档提及的类外assets/css/components/grid.css 还实现了几个值得了解的能力.Grid--justifyCenter { justify-content: center; /* 主轴居中整行单元格水平居中 */ } .Grid-cell--autoSize { flex: none; /* 单元格按内容宽度渲染不参与伸缩 */ }以及一套完整的gutters间距体系。文档中的Grid--gutters用负外边距 内边距的经典技巧实现单元格之间的均匀沟槽.Grid--gutters { margin: -1em 0 1em -1em; } .Grid--gutters .Grid-cell { padding: 1em 0 0 1em; }原理容器左边/上边用负 margin 抵消首行首列的 padding每个单元格通过左/上 padding 留出1em沟槽flex-wrap: wrap保证换行后第二行的间距依然成立。仓库还提供了加宽档位Grid--guttersLg1.5em、Grid--guttersXl2em以及small-/med-/large-Grid--gutters*响应式变体见 assets/css/components/grid.css方便在不同断点切换间距密度。如何在本地查看这套网格演示该演示文档通过 frontmatter 中的template: default.html渲染进站点页面。想本地查看全部效果并交互调试可参照 README.md 的流程git clone https://github.com/philipwalton/solved-by-flexbox.git cd solved-by-flexbox # 安装依赖 npm install # 构建并在 http://localhost:4000 提供本地服务 npm start如需换端口可把端口号作为参数传入npm start -- -p 8080npm start除了构建与本地伺服还会监听文件变化并增量重建刷新浏览器即可即时看到改动效果——你可以把本文讲解的类名、尺寸档位和断点值直接改到 demos/grids.md 与 assets/css/components/grid.css 中反复试验从而真正吃透这套 Flexbox 网格的每个细节。赞分享示例工程【免费下载链接】solved-by-flexboxA showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.项目地址https://gitcode.com/gh_mirrors/so/solved-by-flexbox点击查看免费下载相关推荐Flexbox布局的栅格系统设计solved-by-flexbox项目的Grid组件Flexbox布局的栅格系统设计solved by flexbox项目的Grid组件 你是否还在为CSS布局中的栅格系统头疼使用float布局需要清除浮动示例工程solved-by-flexbox单元测试确保Flexbox组件行为一致性solved by flexbox单元测试确保Flexbox组件行为一致性 在Web开发中Flexbox弹性盒子布局已成为构建灵活响应式界面的核心技术。示例工程用 Flexbox 实现完美的垂直居中Solved by Flexbox 项目 Aligner 组件深度解析用 Flexbox 实现完美的垂直居中Solved by Flexbox 项目 Aligner 组件深度解析 垂直居中一直是 CSS 历史上最让人头疼的问题之示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考