flex-grow 为 0 时子项还会增长吗？
flex-grow 的默认值是 0，意味着子项不会增长来填满剩余空间。子项保持 flex-basis 的尺寸。想让子项填满空间要显式设 flex-grow: 1 或用 flex: 1 缩写。
核心关键词flex-grow 0 表现
面试知识索引 · 分类、标签与搜索
5000+ 道程序员面试题，每题都有完整答案
程序员面试题库第 26 页，收录第 1251–1300 题，共 5000 道完整解析，覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
5000+完整问题
52技术分类
178检索标签
100索引分页
快速定位
分类、标签与关键词搜索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
热门标签178 个
查看其余 163 个标签
测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44组件设计44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41加载与交互性能41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
第 26 页
本页面试问题
按稳定语义路径排序
- 1251
- 1252
flex-shrink 的收缩量是怎么算出来的？
flex 项空间不足时，每项收缩多少由 flex-shrink 乘以 flex-basis 的加权比例决定。用一组具体数字走完计算过程，弄清公式和 min-width 的影响。
核心关键词flex-shrink 计算 - 1253
为什么调大 flex-shrink，长文本还是把布局撑开？
头像旁的长标题设置了收缩却仍把页面撑宽，通常卡在横向 Flex 项的自动最小宽度。通过检查盒子实际尺寸、给正确层级设置零最小宽度，再选择换行或省略方案，弄清收缩计算与内容绘制分别由谁负责。
核心关键词flex-shrink min-width auto - 1254
flex-shrink: 0 一定会让 Flex 容器溢出吗？
工具栏按钮设置不收缩后，是否溢出仍取决于容器余量、其他项目的收缩能力和最小尺寸。用由宽到窄的过程观察负空间怎样转移，区分按钮保宽、搜索框收缩和最终横向滚动三个阶段。
核心关键词flex-shrink 0 overflow - 1255
flex-wrap: wrap 什么时候换行？每一行又怎么排？
响应式卡片使用 Flex 换行时，项目先分到不同的线，每条线再独立计算伸缩与剩余空间。解释为什么最后一排只有一张卡片时可能突然拉宽，并说明需要严格跨行列对齐时应该怎样选择布局方式。
核心关键词flex-wrap wrap flex line - 1256
order 改了 Flex 项的显示顺序，键盘顺序也会变吗？
购买按钮用排序属性提前显示，视觉位置会改变，但 DOM、读屏和键盘焦点顺序不会跟着重排。结合相同排序值、换行时的项目分组和交互路径，判断哪些装饰性调整可以用排序属性，哪些必须调整源顺序。
核心关键词flex order accessibility - 1257
flex-start 和 flex-end 在不同 flex-direction 和 RTL 下分别把元素推向哪边？
flex-start 和 flex-end 指向主轴的起点与终点，不保证永远对应屏幕左、右。flex-direction 改成 column 或 row-reverse 后方向会变化，RTL 文本方向也会改变 row 的起点；图标靠边布局要先确认主轴朝向。
核心关键词justify-content flex-start flex-end RTL - 1258
justify-content: safe center 里的 safe 有什么用？
过宽工具栏强行居中可能让起始侧按钮难以访问，安全对齐可在出现这类溢出风险时回退到起始侧。说明它与普通居中、非安全对齐的表现差异，并区分对齐策略与缩小、换行、滚动等容量处理。
核心关键词justify-content safe - 1259
space-between 和 space-around 怎么分主轴剩余空间？
三张定宽卡片排成一行时，先扣除卡片和固定沟槽，剩余空间才交给不同的分布方式。用具体间隔说明两端贴边与四周留白的差别，并解释项目变宽或没有正向余量时为什么看不到预期效果。
核心关键词justify-content space-between space-around - 1260
Flex 的 main-start 和 main-end 由什么决定？
横向 Flex 导航切换到 RTL 或反向排列后，主轴起点不一定是物理左侧。依次检查方向、书写模式和反向值，确定主轴及交叉轴在屏幕上的位置，再解释为什么同一对齐声明会把项目推向不同的边。
核心关键词flex main-start main-end - 1261
Flex 项设 margin: auto，为什么能在两个方向居中？
单张空状态卡片四边自动外边距能够居中，是因为主轴和交叉轴都有可分配的正向余量。通过改变容器高度和项目数量，观察自动边距怎样分配空白，以及内容过大或没有明确高度时为什么会失效。
核心关键词flex margin auto center - 1262
Flex 项的 margin-left: auto 为什么能把它推到右边？
导航栏要把登录按钮与左侧链接分组，可让按钮前方的自动边距吸收剩余主轴空间。说明它比整行两端分散更适合单项推开，也说明多个自动边距会平分余量，以及横向方向改变时物理边距可能带来的问题。
核心关键词flex margin-left auto - 1263
纵向 Flex 布局里，子项为何设了滚动仍撑高容器？
固定页头下的长列表设为弹性增长，仍可能把页面整体撑长而不出现内部滚动。沿纵向 Flex 的祖先链检查高度约束和自动最小高度，找出应允许收缩的那一层，并把滚动交给真正的内容区域。
核心关键词min-height auto flex column - 1264
Flex 项默认的 min-width: auto 到底会算成多少？
代码预览区把侧栏挤出视口时，横向 Flex 项的自动最小宽度可能由不可断内容决定。对比普通段落与长代码的断行机会，分清项目盒无法收缩和内部内容越界，再按层级选择零最小宽度与局部滚动。
核心关键词min-width auto flex - 1265
怎样让 Flex 项缩到比内容还窄？min-width: 0 有什么代价？
标题盒设置零最小宽度后，盒子可以低于内容的自然宽度，长文字却仍可能画出边界。分别检查收缩因子、项目最小尺寸和内容显示规则，说明单行省略为什么还需要不换行、裁剪和溢出提示。
核心关键词min-width 0 flex 收缩 - 1266
Flex 里的文本为什么设置了省略号还会撑开容器？
评论长链接不出现省略号，可能是直接参与 Flex 的外层项目没有真正变窄，而非文本溢出规则失效。沿父子层级定位尺寸瓶颈，先让项目盒可收缩，再检查文本节点是否满足单行、省略和裁剪条件。
核心关键词flex text-overflow min-width - 1267
Flex 项缩不动时，怎样分辨是内容还是 min-width 限制？
两栏布局中的代码块越过视口，可能是右栏 Flex 项被自动最小宽度卡住，也可能只是代码在已缩小的盒子内溢出。利用开发工具逐层查看盒子边界，分别用零最小宽度和局部横向滚动解决两种不同现象。
核心关键词flex 溢出诊断 min-content min-width - 1268
Flex 项隐藏后还占位置吗？order 会怎样算？
导航项目隐藏后是否留下空位，由它是否继续生成 Flex 布局盒子决定。比较不生成盒子与只隐藏可见内容的两种方式，再结合排序属性说明视觉排列、文档节点和交互顺序之间的关系。
核心关键词flex display none visibility hidden order - 1269
flex-wrap: nowrap 下，项目总宽度超了会怎样？
手机页头限定单行时，搜索框可能先收缩，按钮碰到最小尺寸后整行才出现溢出。按基础尺寸、收缩权重和项目下限分析这个过程，并与允许换行时先分线后逐线伸缩的计算顺序对比。
核心关键词flex-wrap nowrap 溢出 - 1270
wrap-reverse 到底反转了 Flex 的什么方向？
多行标签启用反向换行，改变的是交叉轴上各条线出现的方向，不是每行项目的主轴顺序。通过固定容器宽高观察第二条线与对齐属性的变化，并区分它与反向主轴排列及 DOM 阅读顺序。
核心关键词flex-wrap wrap-reverse - 1271
中文竖排时，Flex 的主轴还一定是横向吗？
竖排书写模式下，横向名称的 Flex 行主轴可能落在屏幕竖直方向，列主轴则沿块方向。以竖排文字容器为例判断两条逻辑轴，再推导方向反转、主轴对齐和交叉轴对齐在物理屏幕上的表现。
核心关键词flex writing-mode 竖排 - 1272
Grid 的 auto-fill 和 auto-fit 什么时候看出区别？
自适应卡片网格能容纳的列数多于卡片数时，保留空重复轨道与折叠空轨道会得到不同宽度。通过逐步减少卡片数量观察已有卡片是否拉宽，并说明重复轨道最小尺寸和容器宽度怎样决定差异是否显现。
核心关键词CSS Grid auto-fill与auto-fit区别 - 1273
Grid 自动放置会避开手动定位的项目吗？
总览卡片显式占据网格单元后，普通卡片由自动放置游标寻找剩余可用区域。区分完整自动定位、只指定一个轴及两个轴都写死的项目，解释跨列占位、密集回填和显式项目相互重叠的边界。
核心关键词CSS Grid 自动放置避开显式定位项目 - 1274
Grid 列宽用 1fr 和百分比，差别在哪里？
两列卡片加上沟槽后，两个百分比轨道可能直接超出容器，而两个弹性份额会参与剩余空间分配。用已知容器宽度手算两种轨道，再考虑长内容带来的自动最小尺寸，避免把弹性份额误认成固定百分比。
核心关键词CSS Grid fr单位与百分比轨道尺寸区别 - 1275
Grid 容器没设高度，行轨道会怎么长？
文章卡片网格里，某张摘要变长会抬高所在行的轨道，但其他行未必同步等高。区分内容决定的容器高度与显式固定高度，并说明项目拉伸、跨行贡献和内容对齐分别在什么条件下影响视觉结果。
核心关键词CSS Grid 行轨道高度自适应内容 - 1276
Grid 轨道的 fit-content() 和 auto 有什么区别？
详情页标签列需要随内容增长，又不希望无限挤压正文时，可比较自动轨道和带限制的内容适应轨道。通过短标签、长标签与不可断字符串观察上限和最小内容贡献的关系，说明轨道限制不等于强制裁剪内容。
核心关键词CSS Grid fit-content()与auto轨道区别 - 1277
Grid 的 fr 单位是怎样分配剩余宽度的？
用固定列加弹性列解释 Grid 怎样计算 fr：先扣掉固定轨道和间距，再按系数分配可用空间。还会说明内容的自动最小尺寸为什么可能撑开 1fr，以及如何用 minmax(0, 1fr) 处理长内容。
核心关键词CSS Grid fr单位分配剩余空间 - 1278
Grid 的 gap 是加在轨道之间，还是项目之间？
解释 Grid 中 gap 的真正位置：它位于相邻行轨或列轨之间，跨格项目内部不会再插入间距。通过显式与隐式轨道的例子，说明新增轨道为什么会多出一道 gap，以及 gap 与项目 margin 的区别。
核心关键词CSS Grid gap属性与隐式轨道空间 - 1279
grid-area 的四个位置参数分别指定什么？
拆解 grid-area 的四段式写法，按行起点、列起点、行终点、列终点定位项目，并解释数字网格线与命名区域的两种用法。还会区分 span 与终点线，避免把网格格子编号当成网格线编号。
核心关键词CSS Grid grid-area简写同时指定行列 - 1280
grid-auto-flow 的 row、column 和 dense 分别怎么排项目？
说明 Grid 自动放置项目时的扫描方向与回填规则。row 沿行推进，column 沿列推进，dense 会尝试回填早先留下的空位；同时指出视觉顺序可能和 DOM 顺序不同，避免把 dense 用在必须保持阅读顺序的界面。
核心关键词CSS Grid grid-auto-flow属性row column dense - 1281
写了 grid 简写后，为什么隐式轨道设置会失效？
解释 grid 是同时覆盖显式和隐式网格设置的简写属性。即使只写了行列模板，未写出的 grid-auto-rows、grid-auto-columns 与 grid-auto-flow 也会被重置；通过声明顺序例子说明如何避免响应式样式中的意外覆盖。
核心关键词CSS Grid grid简写重置隐式属性问题 - 1282
多个 Grid 项目能使用同一个命名区域吗？
命名网格区域是一组放置坐标，并不限制只能放一个项目。多个元素使用同一个 grid-area 会叠在一起，绘制顺序、z-index 和命中测试决定谁在上面；背景装饰、徽标覆盖等场景可借此省去额外定位。
核心关键词CSS Grid 多个项目引用同一命名区域 - 1283
命名区域和命名网格线有什么区别？
用页面主栏说明 grid-template-areas 与方括号命名线的关系：区域描述矩形，线描述边界；命名区域会自动生成名称带 start 和 end 的边界线。还会指出显式线名可能影响同名解析。
核心关键词CSS Grid grid-template-areas与命名网格线 - 1284
Grid 固定列和 fr 列怎样计算可用宽度？
从容器内容盒、固定长度轨道与列间距出发，推导弹性列能拿到的空间。说明 px、百分比和 minmax 对计算的不同影响，并解释容器宽度不确定时百分比为何不能简单按视口宽度套算。
核心关键词CSS Grid 固定长度轨道与自由空间计算 - 1285
grid-template 简写包括哪些属性，能写 subgrid 吗？
grid-template 组合显式行、列和命名区域，grid 简写还可能重置自动轨道相关设置。subgrid 用于子网格的行或列轨道列表，让子项沿父网格对应跨度对齐；它不是一个可单独铺在任意容器上的区域名。
核心关键词CSS Grid grid-template简写属性分解 - 1286
用 Grid 的命名区域怎样写圣杯布局？
页头、页脚、双侧栏和主内容可用 grid-template-areas 写成直观的区域矩阵，窄屏时再换成单列布局。主内容轨道要允许收缩，防止长文本撑开页面；视觉重排只改变位置，不改变 DOM 与键盘阅读顺序。
核心关键词CSS Grid grid-template-areas圣杯布局 - 1287
grid-auto-flow: column 时，隐式列怎样生成？
解释自动放置沿列推进时，超出已有显式轨道的项目如何促使 Grid 新建隐式列。结合固定行数的卡片排布，说明 grid-auto-columns 控制新增列宽，而容器缩放不会自行把既有项目改成新的响应式列数。
核心关键词CSS Grid 容器尺寸变化隐式轨道自适应 - 1288
Grid 的隐式轨道从哪里来，尺寸怎么控制？
说明显式模板之外的行列并非布局错误：自动放置项目、显式项目越过已有网格线都可能创建隐式轨道。用 grid-auto-rows 与 grid-auto-columns 控制新增轨道尺寸，并解释 auto、固定值和 minmax 的取舍。
核心关键词CSS Grid 隐式网格与grid-auto-rows设置 - 1289
Grid 的 min-content 尺寸为什么会影响整列？
从不可断开的内容入手解释 Grid 的 min-content 尺寸参与轨道下限计算。澄清“Grid Level 2 改进算法”不能被概括为所有内容都会自动收缩，具体布局还要看跨度、自动最小尺寸与溢出设置。
核心关键词CSS Grid 2 min-content尺寸算法改进 - 1290
网格项的 min-width: auto 为什么会撑宽列？
网格项的自动最小尺寸可能让单条 1fr 轨道无法缩窄，长文本或不可换行内容便把整列撑开。min-width: 0 与 minmax(0, 1fr) 分别作用于项目和轨道；即使列能收缩，内容本身仍可能需要换行、裁剪或滚动。
核心关键词CSS Grid 网格项min-width auto最小尺寸 - 1291
网格项超出轨道时，Grid 会把轨道撑大吗？
区分网格轨道扩张与项目内容溢出两个现象。自动或弹性轨道可能受项目最小贡献影响而扩大；固定尺寸轨道则不会仅因内容过宽就改变声明的宽度，内容可能覆盖邻格。文中给出逐层排查方法。
核心关键词CSS Grid 网格项超出轨道尺寸表现 - 1292
Grid 的 justify-items 和 align-items 默认怎么对齐？
justify-items 与 align-items 控制网格项目在各自区域中的行内轴、块轴对齐，通常默认表现为拉伸。图片等有固有尺寸或纵横比的项目可能不按预期拉满；start、center、baseline 处理的是项目本身，不能代替整组轨道的对齐属性。
核心关键词CSS Grid justify-items与align-items默认值 - 1293
Grid 网格线的 -1 从哪一边开始数？
解释负网格线编号从显式网格末端反向计数：-1 是终点线，-2 是倒数第二条线。通过跨全宽项目说明 grid-column: 1 / -1 的含义，并指出隐式轨道与书写方向会让视觉上的左右直觉失效。
核心关键词CSS Grid 网格线负索引用法 - 1294
Masonry 瀑布流和 subgrid 分别解决什么问题？
对比两种经常被混淆的 Grid 能力：瀑布流用堆叠算法填充高低不同的卡片，subgrid 让嵌套网格沿用父级轨道。说明普通 Grid 的 dense 不是瀑布流，并提醒原生 masonry 相关语法仍在演进，生产使用要查兼容性。
核心关键词CSS Grid masonry瀑布流与subgrid区别 - 1295
Grid 轨道的 min-content 和 max-content 有什么区别？
用可换行标题解释两种内容固有尺寸：min-content 尽量在允许处换行，max-content 尽量保留不软换行所需宽度。说明它们作为 Grid 轨道尺寸时如何受长词、图片与容器宽度影响，并给出与 minmax 组合的实际场景。
核心关键词CSS Grid min-content与max-content轨道尺寸 - 1296
minmax(auto, 1fr) 的 auto 最小值怎么算？
解释 minmax 中作为下限的 auto 会取轨道内网格项目的自动最小尺寸贡献，而不是无条件等于 0 或 min-content。通过长 URL 撑宽弹性列的场景，说明它与 minmax(0, 1fr) 的区别及内容溢出的后续处理。
核心关键词CSS Grid minmax() auto最小值与内容 - 1297
minmax(0, 1fr) 与 minmax(auto, 1fr) 差在哪？
比较两种常见弹性轨道写法的最小值差异。0 允许轨道缩到内容最小尺寸以下，auto 则可能保留项目的自动最小贡献；通过长文本解释轨道被撑开与内容越界是两个独立问题。
核心关键词CSS Grid minmax(0,1fr)与minmax(auto,1fr)区别 - 1298
子网格怎样使用父网格的命名线？
解释 grid-template-columns: subgrid 如何让嵌套网格沿用父项目跨过的列轨与命名线。说明子网格内部线号重新从自身范围计算，但继承的线名可直接引用；还可以在子网格上添加局部线名。
核心关键词CSS Grid subgrid继承父网格命名线 - 1299
网格轨道比容器小时，多余空间怎么分配？
说明当显式轨道总尺寸小于容器时，可用 justify-content 与 align-content 移动或分散整组轨道。对比 start、center、space-between 和 stretch，并解释 fr 轨道已吃掉自由空间时为什么看不出这些属性的效果。
核心关键词CSS Grid 网格小于容器时的空间对齐 - 1300
怎样用 Grid 把两个项目叠在同一个区域？
展示 Grid 的重叠布局：让图片、遮罩与标题使用相同的 grid-area 或相同网格线，就能占据同一块区域。说明重叠不改变 DOM 顺序，项目层级、指针事件和可访问性仍需明确处理。
核心关键词CSS Grid 网格区域实现重叠布局