Lynx 卡片列表布局实战基于 Flex 与文本截断构建 Card List 的完整指南【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx本篇基于 Lynx 引擎 API 文档包ai/skills/lynx-api-docs中官方示例card-list.md展开讲解如何用view、text、image与 Flexbox 组合出典型的左图 标题 描述 箭头卡片列表布局。读完你可以完整复现该示例的每一处样式细节并理解flex: 1弹性填充、单行文本省略号、间距与圆角这些关键 CSS 技巧在 Lynx 布局引擎中的真实行为避免踩中 Lynx 与 Web CSS 的默认值差异。1. 示例背景card-list 在文档体系中的位置Lynx 仓库内置了一套面向 AI Agent 与开发者的引擎上下文文档包AI Context Bundle入口在 ai/skills/lynx-api-docs/skills/using-lynx-api-docs/README.md。该文档包按布局系统、CSS 参考、元素参考、模式、布局示例组织其中 examples 目录下收录了 5 个可直接落地的布局示例card-list.md本文主角常见卡片列表布局sticky-header.md滚动时固定的头部bottom-nav.md固定到底边的导航栏sidebar-layout.md侧边栏 主内容区waterfall.md两列 Grid 近似瀑布流卡片列表是移动端信息流、设置页、订单列表中最常见的结构之一。官方示例给出的目标渲染效果如下┌─────────────────────────┐ │ [IMG] Title │ │ Description │ ├─────────────────────────┤ │ [IMG] Title │ │ Description │ └─────────────────────────┘即每张卡片横向排布左侧固定尺寸缩略图中间是标题在上、描述在下的文本区右侧是一个箭头卡片之间有间距整体背景为浅灰色。2. 完整实现代码以下 JSX 与 CSS 完整继承自 card-list.md可直接复制到 Lynx 项目中运行。2.1 结构代码CardList.jsx// CardList.jsx import { useState } from lynx-js/react; export default function CardList() { const [items] useState([ { id: 1, title: Item 1, desc: Description 1, img: https://example.com/1.jpg, }, { id: 2, title: Item 2, desc: Description 2, img: https://example.com/2.jpg, }, ]); return ( view classNamelist {items.map((item) ( view classNamecard key{item.id} image classNamecard-image src{item.img} / view classNamecard-content text classNamecard-title{item.title}/text text classNamecard-desc{item.desc}/text /view text classNamecard-arrow/text /view ))} /view ); }结构上有三点值得注意最外层.list容器不声明display。根据 README 的 Key PointsLynx 中未声明display的元素默认使用Linear Layout类似 Flex 纵向排列但性能更好因此纵向堆叠的卡片列表天然走默认布局无需写display: flex; flex-direction: column。卡片内部显式声明display: flex。因为卡片是横向row三栏结构属于复杂弹性布局这正是文档推荐的 Flex 适用场景见 layout/flex-layout.md。所有可见文字都包在text里。这是 elements/view.md Guardrails 的硬性约束view内不允许直接放置裸文本必须通过text渲染包括右侧那个不起眼的箭头。2.2 样式代码CardList.css/* CardList.css */ .list { padding: 16px; background-color: #f5f5f5; } .card { display: flex; flex-direction: row; align-items: center; padding: 12px; margin-bottom: 12px; background-color: #ffffff; border-radius: 8px; } .card-image { width: 60px; height: 60px; border-radius: 4px; margin-right: 12px; } .card-content { display: flex; flex-direction: column; flex: 1; /* Fill the remaining space */ } .card-title { font-size: 16px; font-weight: bold; color: #333333; margin-bottom: 4px; } .card-desc { font-size: 14px; color: #666666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .card-arrow { font-size: 18px; color: #999999; margin-left: 8px; }3. 逐条解析五个关键技术点原文档的 Key Points 概括了 5 条技术要点下面结合文档包中各参考文档逐一展开说明为什么这样写以及 Lynx 引擎下的实际行为。3.1 Flex 布局display: flex实现横向排列.card上同时声明了display: flex和flex-direction: row。按 flex-layout.md 的属性参考表flex-direction的默认值本来就是row这里显式写出是为了表达意图、防御默认值变化。一个容易忽视的默认值差异Lynx 中align-items默认是stretch与 Web 一致子项会被拉满交叉轴这里就是卡片高度。示例显式声明align-items: center让 60px 的图片和文本区在卡片内垂直居中而不是被拉伸成与卡片等高。同理justify-content在 Lynx 的默认值是stretch2.1而 Web 默认是flex-start见 lynx-vs-web/css-differences.md。本例未依赖justify-content子项按起点排列即可因此不受此差异影响。3.2flex: 1让中间内容区填满剩余宽度.card-content上的flex: 1是整个卡片布局的枢纽。按文档定义flex: 1等价于flex: 1 1 0%即flex-grow: 1; flex-shrink: 1; flex-basis: 0%见 flex-layout.md 的 flex 章节flex-basis: 0%文本区初始主轴尺寸为 0不占内容宽度flex-grow: 1把行方向上未被图片60px 12px margin和箭头占走的全部剩余宽度归文本区。这正是文档包中 Fixed Sidebar and Flexible Main Content 模式的变体——固定宽度元素 flex: 1弹性区。同时best-practices.md明确要求优先使用flex简写而非分别设置长属性因为单独写flex-grow/flex-shrink而省略flex-basis可能产生意外行为。这里还藏着一个 Lynx 特有的行为值得理解Lynx 的flex-shrink不会像 Web 那样自动应用基于内容的min-content最小尺寸保护默认行为相当于显式把交叉项主轴最小尺寸设为0。也就是说当屏幕极窄、图片和箭头压缩了可用空间时.card-desc会继续被收缩而不是溢出文本随之触发省略号——这与 3.3 节的截断三件套是配套的。若希望某项不被压缩需显式flex-shrink: 0或设置主轴min-width。3.3 文本截断white-spacetext-overflowoverflow三件套.card-desc用三个属性组合实现单行省略号white-space: nowrap; /* 禁止换行 */ text-overflow: ellipsis; /* 溢出时显示省略号 */ overflow: hidden; /* 隐藏溢出部分 */elements/text.md 的 Single-line ellipsis 小节给出了同样的标准写法并在 Guardrails 中强调使用text-overflow: ellipsis时必须让文本有一个可解析的宽度或max-width。本例中描述文本的宽度正是由父级.card-content的flex: 1间接解析出来的——文本区的宽度被 Flex 布局确定省略号才有截断边界。另外注意white-space的默认值问题best-practices.md的 Pitfall 1 指出text元素默认不自动换行默认white-space: nowrap需要换行时要显式white-space: normal。本例中.card-desc显式写出nowrap虽与默认值相同但意图明确而.card-title依赖默认行为保持单行。3.4 间距padding管内部、margin管外部示例中两类间距的分工非常典型padding元素内部.list用padding: 16px让卡片列表与屏幕边缘留白.card用padding: 12px让图文与卡片边缘留白margin元素外部.card用margin-bottom: 12px拉开卡片间距.card-image用margin-right: 12px、.card-arrow用margin-left: 8px控制卡片内部的栏间距。两个 Lynx 特有事实会影响间距设计见 quick-reference.md 的 Lynx vs Web CSS Key Differences默认盒模型是border-boxWeb 默认content-box.card-image声明width: 60px; height: 60px就是图片的视觉边界不会被 padding 或 border 撑大margin 不会折叠no margin collapsing相邻卡片只产生一份margin-bottom: 12px间距不存在 Web 中相邻垂直 margin 合并取最大值的叠加问题卡片间距可精确预测。3.5 圆角border-radius制造卡片视觉.card使用border-radius: 8px做整卡圆角.card-image用4px做小尺寸圆角形成层级一致的视觉语言。配合.card的白底#ffffff与.list的浅灰底#f5f5f5圆角区域与背景色交界自然构成典型的浮层卡片效果。若卡片需要裁掉内部子元素溢出到圆角之外的内容可参考 elements/view.md 中的 Visual effects 模式补充overflow: hidden。3.6 补充图片必须有可解析的尺寸.card-image显式给了60px × 60px这不只是视觉效果的需要。elements/image.md 的 Sizing note 明确指出为获得最可靠的加载行为应通过style给image一个解析后的尺寸或使用prefetch-width/prefetch-height或启用auto-sizebest-practices.md的 Pitfall 2 更直白——没有尺寸的图片不会渲染。示例把尺寸写死在 CSS 类里而不是内联 style同时满足了避免布局抖动与优先用 CSS 类而非内联样式两条性能建议。4. 结合引擎文档理解默认值陷阱把示例代码与 lynx-vs-web/css-differences.md 对照可以提炼出复现该卡片列表时最需要小心的三个 Lynx 默认值关注点Web 行为Lynx 行为对本示例的影响justify-content默认值flex-startstretch2.1本例子项有明确尺寸不受影响但若省略align-items: centerstretch默认值会把图片拉满卡片高度Flex 子项最小尺寸min-width: auto内容保护默认无内容最小尺寸相当于0.card-desc可被继续压缩并触发省略号而非溢出卡片默认布局块级流block flowLinear 布局纵向交叉轴默认拉伸.list未写display即可纵向堆满宽度的卡片且无需width: 100%其中第三点来自 css-differences 文档对默认布局的说明Lynx 中未声明display时使用display: linear默认linear-direction: column当父级交叉轴尺寸确定而子项在该方向无尺寸或为auto时子项会填满父级交叉轴。这正是卡片能自然占满列表宽度的原因。5. 从示例到生产规模化与响应式扩展示例用view直接映射数组适合少量静态条目。若卡片是长列表数十条以上best-practices.md 的 Optimize Lists 给出了升级路径把外层换成listlist-item让引擎复用列表项、限制同时渲染的元素数量并为图片开启懒加载// ✅ Use list instead of scroll-view with many view children list classNameitem-list scroll-y {items.map((item) ( list-item key{item.id} item-key{item.id} image src{item.image} lazy-load{true} placeholderplaceholder.png / text{item.title}/text /list-item ))} /list响应式方面本例的尺寸均为px在 quick-reference.md 推荐的适配方案下可把关键尺寸改写为rem配合page { font-size: calc(100vw / 23.4375); }建立 375px 视口下 1rem 16px 的基准使padding: 16px变为padding: 1rem等从而在不同屏幕宽度上等比缩放Lynx 不支持media查询跨断点调整需用视口单位或 JS 动态计算。6. 小结与延伸阅读卡片列表示例虽只有两个文件却覆盖了 Lynx 前端开发最核心的几条规则默认 Linear 布局、Flex 用于行内弹性分配、flex: 1简写优先、文本必须进text且截断靠三件套、图片必须有解析尺寸、border-box与 margin 不折叠的盒模型。建议按以下顺序延伸阅读均位于ai/skills/lynx-api-docs/skills/using-lynx-api-docs/下examples/card-list.md本文原始示例layout/flex-layout.mdFlexbox 全属性参考与flex-shrink分配算法elements/view.md、elements/text.md、elements/image.md三个元素的完整属性与边界lynx-vs-web/css-differences.mdLynx 与 Web CSS 的系统性差异best-practices.md性能优化、常见坑位与 Code Review 清单【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/14 17:57:44 · 阅读 1.2k Lynx 卡片列表布局实战：基于 Flex 与文本截断构建 Card List 的完整指南
Lynx 卡片列表布局实战基于 Flex 与文本截断构建 Card List 的完整指南【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx本篇基于 Lynx 引擎 API 文档包ai/skills/lynx-api-docs中官方示例card-list.md展开讲解如何用view、text、image与 Flexbox 组合出典型的左图 标题 描述 箭头卡片列表布局。读完你可以完整复现该示例的每一处样式细节并理解flex: 1弹性填充、单行文本省略号、间距与圆角这些关键 CSS 技巧在 Lynx 布局引擎中的真实行为避免踩中 Lynx 与 Web CSS 的默认值差异。1. 示例背景card-list 在文档体系中的位置Lynx 仓库内置了一套面向 AI Agent 与开发者的引擎上下文文档包AI Context Bundle入口在 ai/skills/lynx-api-docs/skills/using-lynx-api-docs/README.md。该文档包按布局系统、CSS 参考、元素参考、模式、布局示例组织其中 examples 目录下收录了 5 个可直接落地的布局示例card-list.md本文主角常见卡片列表布局sticky-header.md滚动时固定的头部bottom-nav.md固定到底边的导航栏sidebar-layout.md侧边栏 主内容区waterfall.md两列 Grid 近似瀑布流卡片列表是移动端信息流、设置页、订单列表中最常见的结构之一。官方示例给出的目标渲染效果如下┌─────────────────────────┐ │ [IMG] Title │ │ Description │ ├─────────────────────────┤ │ [IMG] Title │ │ Description │ └─────────────────────────┘即每张卡片横向排布左侧固定尺寸缩略图中间是标题在上、描述在下的文本区右侧是一个箭头卡片之间有间距整体背景为浅灰色。2. 完整实现代码以下 JSX 与 CSS 完整继承自 card-list.md可直接复制到 Lynx 项目中运行。2.1 结构代码CardList.jsx// CardList.jsx import { useState } from lynx-js/react; export default function CardList() { const [items] useState([ { id: 1, title: Item 1, desc: Description 1, img: https://example.com/1.jpg, }, { id: 2, title: Item 2, desc: Description 2, img: https://example.com/2.jpg, }, ]); return ( view classNamelist {items.map((item) ( view classNamecard key{item.id} image classNamecard-image src{item.img} / view classNamecard-content text classNamecard-title{item.title}/text text classNamecard-desc{item.desc}/text /view text classNamecard-arrow/text /view ))} /view ); }结构上有三点值得注意最外层.list容器不声明display。根据 README 的 Key PointsLynx 中未声明display的元素默认使用Linear Layout类似 Flex 纵向排列但性能更好因此纵向堆叠的卡片列表天然走默认布局无需写display: flex; flex-direction: column。卡片内部显式声明display: flex。因为卡片是横向row三栏结构属于复杂弹性布局这正是文档推荐的 Flex 适用场景见 layout/flex-layout.md。所有可见文字都包在text里。这是 elements/view.md Guardrails 的硬性约束view内不允许直接放置裸文本必须通过text渲染包括右侧那个不起眼的箭头。2.2 样式代码CardList.css/* CardList.css */ .list { padding: 16px; background-color: #f5f5f5; } .card { display: flex; flex-direction: row; align-items: center; padding: 12px; margin-bottom: 12px; background-color: #ffffff; border-radius: 8px; } .card-image { width: 60px; height: 60px; border-radius: 4px; margin-right: 12px; } .card-content { display: flex; flex-direction: column; flex: 1; /* Fill the remaining space */ } .card-title { font-size: 16px; font-weight: bold; color: #333333; margin-bottom: 4px; } .card-desc { font-size: 14px; color: #666666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .card-arrow { font-size: 18px; color: #999999; margin-left: 8px; }3. 逐条解析五个关键技术点原文档的 Key Points 概括了 5 条技术要点下面结合文档包中各参考文档逐一展开说明为什么这样写以及 Lynx 引擎下的实际行为。3.1 Flex 布局display: flex实现横向排列.card上同时声明了display: flex和flex-direction: row。按 flex-layout.md 的属性参考表flex-direction的默认值本来就是row这里显式写出是为了表达意图、防御默认值变化。一个容易忽视的默认值差异Lynx 中align-items默认是stretch与 Web 一致子项会被拉满交叉轴这里就是卡片高度。示例显式声明align-items: center让 60px 的图片和文本区在卡片内垂直居中而不是被拉伸成与卡片等高。同理justify-content在 Lynx 的默认值是stretch2.1而 Web 默认是flex-start见 lynx-vs-web/css-differences.md。本例未依赖justify-content子项按起点排列即可因此不受此差异影响。3.2flex: 1让中间内容区填满剩余宽度.card-content上的flex: 1是整个卡片布局的枢纽。按文档定义flex: 1等价于flex: 1 1 0%即flex-grow: 1; flex-shrink: 1; flex-basis: 0%见 flex-layout.md 的 flex 章节flex-basis: 0%文本区初始主轴尺寸为 0不占内容宽度flex-grow: 1把行方向上未被图片60px 12px margin和箭头占走的全部剩余宽度归文本区。这正是文档包中 Fixed Sidebar and Flexible Main Content 模式的变体——固定宽度元素 flex: 1弹性区。同时best-practices.md明确要求优先使用flex简写而非分别设置长属性因为单独写flex-grow/flex-shrink而省略flex-basis可能产生意外行为。这里还藏着一个 Lynx 特有的行为值得理解Lynx 的flex-shrink不会像 Web 那样自动应用基于内容的min-content最小尺寸保护默认行为相当于显式把交叉项主轴最小尺寸设为0。也就是说当屏幕极窄、图片和箭头压缩了可用空间时.card-desc会继续被收缩而不是溢出文本随之触发省略号——这与 3.3 节的截断三件套是配套的。若希望某项不被压缩需显式flex-shrink: 0或设置主轴min-width。3.3 文本截断white-spacetext-overflowoverflow三件套.card-desc用三个属性组合实现单行省略号white-space: nowrap; /* 禁止换行 */ text-overflow: ellipsis; /* 溢出时显示省略号 */ overflow: hidden; /* 隐藏溢出部分 */elements/text.md 的 Single-line ellipsis 小节给出了同样的标准写法并在 Guardrails 中强调使用text-overflow: ellipsis时必须让文本有一个可解析的宽度或max-width。本例中描述文本的宽度正是由父级.card-content的flex: 1间接解析出来的——文本区的宽度被 Flex 布局确定省略号才有截断边界。另外注意white-space的默认值问题best-practices.md的 Pitfall 1 指出text元素默认不自动换行默认white-space: nowrap需要换行时要显式white-space: normal。本例中.card-desc显式写出nowrap虽与默认值相同但意图明确而.card-title依赖默认行为保持单行。3.4 间距padding管内部、margin管外部示例中两类间距的分工非常典型padding元素内部.list用padding: 16px让卡片列表与屏幕边缘留白.card用padding: 12px让图文与卡片边缘留白margin元素外部.card用margin-bottom: 12px拉开卡片间距.card-image用margin-right: 12px、.card-arrow用margin-left: 8px控制卡片内部的栏间距。两个 Lynx 特有事实会影响间距设计见 quick-reference.md 的 Lynx vs Web CSS Key Differences默认盒模型是border-boxWeb 默认content-box.card-image声明width: 60px; height: 60px就是图片的视觉边界不会被 padding 或 border 撑大margin 不会折叠no margin collapsing相邻卡片只产生一份margin-bottom: 12px间距不存在 Web 中相邻垂直 margin 合并取最大值的叠加问题卡片间距可精确预测。3.5 圆角border-radius制造卡片视觉.card使用border-radius: 8px做整卡圆角.card-image用4px做小尺寸圆角形成层级一致的视觉语言。配合.card的白底#ffffff与.list的浅灰底#f5f5f5圆角区域与背景色交界自然构成典型的浮层卡片效果。若卡片需要裁掉内部子元素溢出到圆角之外的内容可参考 elements/view.md 中的 Visual effects 模式补充overflow: hidden。3.6 补充图片必须有可解析的尺寸.card-image显式给了60px × 60px这不只是视觉效果的需要。elements/image.md 的 Sizing note 明确指出为获得最可靠的加载行为应通过style给image一个解析后的尺寸或使用prefetch-width/prefetch-height或启用auto-sizebest-practices.md的 Pitfall 2 更直白——没有尺寸的图片不会渲染。示例把尺寸写死在 CSS 类里而不是内联 style同时满足了避免布局抖动与优先用 CSS 类而非内联样式两条性能建议。4. 结合引擎文档理解默认值陷阱把示例代码与 lynx-vs-web/css-differences.md 对照可以提炼出复现该卡片列表时最需要小心的三个 Lynx 默认值关注点Web 行为Lynx 行为对本示例的影响justify-content默认值flex-startstretch2.1本例子项有明确尺寸不受影响但若省略align-items: centerstretch默认值会把图片拉满卡片高度Flex 子项最小尺寸min-width: auto内容保护默认无内容最小尺寸相当于0.card-desc可被继续压缩并触发省略号而非溢出卡片默认布局块级流block flowLinear 布局纵向交叉轴默认拉伸.list未写display即可纵向堆满宽度的卡片且无需width: 100%其中第三点来自 css-differences 文档对默认布局的说明Lynx 中未声明display时使用display: linear默认linear-direction: column当父级交叉轴尺寸确定而子项在该方向无尺寸或为auto时子项会填满父级交叉轴。这正是卡片能自然占满列表宽度的原因。5. 从示例到生产规模化与响应式扩展示例用view直接映射数组适合少量静态条目。若卡片是长列表数十条以上best-practices.md 的 Optimize Lists 给出了升级路径把外层换成listlist-item让引擎复用列表项、限制同时渲染的元素数量并为图片开启懒加载// ✅ Use list instead of scroll-view with many view children list classNameitem-list scroll-y {items.map((item) ( list-item key{item.id} item-key{item.id} image src{item.image} lazy-load{true} placeholderplaceholder.png / text{item.title}/text /list-item ))} /list响应式方面本例的尺寸均为px在 quick-reference.md 推荐的适配方案下可把关键尺寸改写为rem配合page { font-size: calc(100vw / 23.4375); }建立 375px 视口下 1rem 16px 的基准使padding: 16px变为padding: 1rem等从而在不同屏幕宽度上等比缩放Lynx 不支持media查询跨断点调整需用视口单位或 JS 动态计算。6. 小结与延伸阅读卡片列表示例虽只有两个文件却覆盖了 Lynx 前端开发最核心的几条规则默认 Linear 布局、Flex 用于行内弹性分配、flex: 1简写优先、文本必须进text且截断靠三件套、图片必须有解析尺寸、border-box与 margin 不折叠的盒模型。建议按以下顺序延伸阅读均位于ai/skills/lynx-api-docs/skills/using-lynx-api-docs/下examples/card-list.md本文原始示例layout/flex-layout.mdFlexbox 全属性参考与flex-shrink分配算法elements/view.md、elements/text.md、elements/image.md三个元素的完整属性与边界lynx-vs-web/css-differences.mdLynx 与 Web CSS 的系统性差异best-practices.md性能优化、常见坑位与 Code Review 清单【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考