flex 容器里放一个绝对定位的子元素，布局会怎样？
flex 容器里的绝对定位子项不参与弹性布局，不占空间也不被 flex-grow 分配。但容器加了 position: relative 后仍然是它的包含块，定位坐标从容器 padding 边开始算。
核心关键词flex 绝对定位子项 static position
面试知识索引 · 分类、标签与搜索
CSS · Flex 布局面试题，41 道完整答案
CSS · Flex 布局面试题第 1 页，显示第 1–41 题，共找到 41 道完整解析，可继续按分类、标签与关键词缩小范围。
41筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
单行 flex 容器里 align-content 为什么不生效？
默认不换行的 Flex 容器只有一条 flex 行，align-content 没有可分配的行间空间，设置它通常看不到效果。单行子项的交叉轴位置由 align-items 控制；多行容器还需有多余的交叉轴空间才能体现行组对齐。
核心关键词align-content single line - 0003
align-content 设成 space-between 后行间距是怎么分的？
多行 Flex 容器只有交叉轴留有空白时，线与线之间的剩余空间才会被分散；只有一行或容器高度随内容增长时，改这个值可能看不到效果。通过固定高度的两行卡片对照项目对齐和线组对齐。
核心关键词align-content space-between rows - 0004
align-content 和 align-items 到底怎么分工？
align-content 管的是多条 flex line 之间的交叉轴空间分配，align-items 管的是每条 line 内部子项的对齐。两者作用层级不同，必须配合 flex-wrap: wrap 才能看到 align-content 的效果。
核心关键词align-content multi-line flex - 0005
flex-direction 改成 column 后 align-items 对齐的是哪个方向？
flex-direction: column 时交叉轴变成水平方向，align-items: center 让子项水平居中。很多人以为 align-items 永远管垂直方向，其实它管的是交叉轴，方向随 flex-direction 变化。
核心关键词align-items center column - 0006
align-items 默认值 stretch 在什么条件下才会拉伸子项？
align-items 的默认值是 stretch，会让子项在交叉轴方向拉伸填满 flex line 的高度。但前提是子项没有设显式高度，一旦写了 height，stretch 就不起作用了。
核心关键词align-items stretch flex - 0007
align-self 怎么覆盖 align-items 的效果？
align-self 让单个 flex 子项覆盖容器的 align-items 设定，独立控制自己在交叉轴上的对齐方式。它和 justify-content 互不干扰，一个管交叉轴，一个管主轴。
核心关键词align-self override - 0008
flex 子项在交叉轴上用 margin auto 会怎样？
flex 子项在交叉轴方向设 margin auto 会吸收行内所有剩余空间，效果相当于覆盖了 align-items。比如 margin-top: auto 把子项推到底部，比 align-self: flex-end 优先级更高。
核心关键词flex margin auto cross-axis - 0009
flex-grow 和 margin auto 同时用会怎样？
flex-grow 和 margin auto 都想吃剩余空间，但 auto margin 先结算。margin auto 吃完空间后 flex-grow 就无事可做了。空间不够时 auto margin 变成 0，shrink 正常工作。
核心关键词flex-grow margin auto conflict - 0010
align-items 设成 baseline 对齐的是什么？
align-items: baseline 让 flex 子项按第一行文字的基线对齐，而不是按盒子的边缘。当子项字号不同或 padding 不同时，文字仍然整齐排列。适合混排按钮、标题和标签的场景。
核心关键词align-items baseline flex - 0011
flex 布局里的主轴和交叉轴是怎么定义的？
flex 布局的核心是两条轴：主轴和交叉轴。主轴由 flex-direction 决定，交叉轴永远垂直于主轴。理解了轴的概念，justify-content 和 align-items 的方向就不会搞混。
核心关键词flex 主轴交叉轴 书写模式 - 0012
column 方向下 align-content stretch 能让各列等宽吗？
flex-direction: column 加 flex-wrap: wrap 时，align-content: stretch 会让各列在交叉轴（水平方向）上等分容器宽度。每列分到相同的宽度，子项在各自列里占满这个宽度。
核心关键词align-content stretch column wrap - 0013
column wrap 布局各列为什么等高？能做瀑布流吗？
纵向排列的 Flex 项要换列，容器必须提供可用的主轴高度；每列的项目按这个高度分组，而列宽取决于项目与剩余横向空间。对比固定高度分栏和真正瀑布流，说明为何列底会留白、默认拉伸也不保证各列等宽。
核心关键词flex column wrap 等高列 瀑布流 - 0014
多行 flex 容器没设高度时，行高是怎么算的？
多行 flex 容器没有显式高度时，容器高度由内容撑开。每行的高度等于行内最高子项的高度，行与行紧挨着排列，没有多余空间给 align-content 分配。 同时说明未限定高度时为何通常只随内容增长。
核心关键词flex 多行容器 无显式高度 行高 - 0015
交叉轴在 row 和 column 下分别是什么方向？
flex 交叉轴永远垂直于主轴。flex-direction: row 时交叉轴垂直，column 时交叉轴水平。align-items 和 align-content 都作用在交叉轴上，方向随 flex-direction 变化。
核心关键词flex 交叉轴 垂直 - 0016
flex-flow 的常见组合在移动端布局里怎么用？
移动端导航使用不同的方向与换行组合，会决定项目是水平换行还是纵向换列。结合固定高度、收缩因子和沟槽计算，说明默认单行布局为何仍可缩小，以及响应式卡片一行三列时如何准确扣除两道间距。
核心关键词flex-flow row column wrap - 0017
flex-basis 设成 auto 和 content 有什么区别？
flex-basis: auto 会先看子项有没有设 width，有就用 width，没有就按内容大小。flex-basis: content 则完全忽略 width，始终按内容大小来算。两者在子项没设 width 时效果一样。
核心关键词flex-basis auto content - 0018
flex-basis 的百分比是相对谁算的？
flex-basis 百分比相对容器的主轴内部尺寸计算。容器没有明确尺寸时百分比回退为 content。还要注意 flex-basis: 0 和 flex-basis: 0% 的区别：0 不会触发百分比解析，0% 会。
核心关键词flex-basis percentage - 0019
flex-direction 的 row 和 column 有什么区别？
flex-direction: row 让子项水平排列，column 让子项垂直排列。切换方向后 justify-content 和 align-items 管的方向也跟着翻转。column 下子项的宽度默认填满容器，高度由内容决定。
核心关键词flex-direction row column 主轴 - 0020
flex-grow 是怎么按比例分配剩余空间的？
flex-grow 分配的是容器剩余空间，不是总空间。计算方式：先算出剩余空间（容器 - 所有子项 flex-basis 之和），再按各子项 flex-grow 的比例分配。flex-grow: 2 的子项比 1 的多分一倍。
核心关键词flex-grow 分配公式 - 0021
flex-grow 为 0 时子项还会增长吗？
flex-grow 的默认值是 0，意味着子项不会增长来填满剩余空间。子项保持 flex-basis 的尺寸。想让子项填满空间要显式设 flex-grow: 1 或用 flex: 1 缩写。
核心关键词flex-grow 0 表现 - 0022
flex-shrink 的收缩量是怎么算出来的？
flex 项空间不足时，每项收缩多少由 flex-shrink 乘以 flex-basis 的加权比例决定。用一组具体数字走完计算过程，弄清公式和 min-width 的影响。
核心关键词flex-shrink 计算 - 0023
为什么调大 flex-shrink，长文本还是把布局撑开？
头像旁的长标题设置了收缩却仍把页面撑宽，通常卡在横向 Flex 项的自动最小宽度。通过检查盒子实际尺寸、给正确层级设置零最小宽度，再选择换行或省略方案，弄清收缩计算与内容绘制分别由谁负责。
核心关键词flex-shrink min-width auto - 0024
flex-shrink: 0 一定会让 Flex 容器溢出吗？
工具栏按钮设置不收缩后，是否溢出仍取决于容器余量、其他项目的收缩能力和最小尺寸。用由宽到窄的过程观察负空间怎样转移，区分按钮保宽、搜索框收缩和最终横向滚动三个阶段。
核心关键词flex-shrink 0 overflow - 0025
flex-wrap: wrap 什么时候换行？每一行又怎么排？
响应式卡片使用 Flex 换行时，项目先分到不同的线，每条线再独立计算伸缩与剩余空间。解释为什么最后一排只有一张卡片时可能突然拉宽，并说明需要严格跨行列对齐时应该怎样选择布局方式。
核心关键词flex-wrap wrap flex line - 0026
order 改了 Flex 项的显示顺序，键盘顺序也会变吗？
购买按钮用排序属性提前显示，视觉位置会改变，但 DOM、读屏和键盘焦点顺序不会跟着重排。结合相同排序值、换行时的项目分组和交互路径，判断哪些装饰性调整可以用排序属性，哪些必须调整源顺序。
核心关键词flex order accessibility - 0027
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 - 0028
justify-content: safe center 里的 safe 有什么用？
过宽工具栏强行居中可能让起始侧按钮难以访问，安全对齐可在出现这类溢出风险时回退到起始侧。说明它与普通居中、非安全对齐的表现差异，并区分对齐策略与缩小、换行、滚动等容量处理。
核心关键词justify-content safe - 0029
space-between 和 space-around 怎么分主轴剩余空间？
三张定宽卡片排成一行时，先扣除卡片和固定沟槽，剩余空间才交给不同的分布方式。用具体间隔说明两端贴边与四周留白的差别，并解释项目变宽或没有正向余量时为什么看不到预期效果。
核心关键词justify-content space-between space-around - 0030
Flex 的 main-start 和 main-end 由什么决定？
横向 Flex 导航切换到 RTL 或反向排列后，主轴起点不一定是物理左侧。依次检查方向、书写模式和反向值，确定主轴及交叉轴在屏幕上的位置，再解释为什么同一对齐声明会把项目推向不同的边。
核心关键词flex main-start main-end - 0031
Flex 项设 margin: auto，为什么能在两个方向居中？
单张空状态卡片四边自动外边距能够居中，是因为主轴和交叉轴都有可分配的正向余量。通过改变容器高度和项目数量，观察自动边距怎样分配空白，以及内容过大或没有明确高度时为什么会失效。
核心关键词flex margin auto center - 0032
Flex 项的 margin-left: auto 为什么能把它推到右边？
导航栏要把登录按钮与左侧链接分组，可让按钮前方的自动边距吸收剩余主轴空间。说明它比整行两端分散更适合单项推开，也说明多个自动边距会平分余量，以及横向方向改变时物理边距可能带来的问题。
核心关键词flex margin-left auto - 0033
纵向 Flex 布局里，子项为何设了滚动仍撑高容器？
固定页头下的长列表设为弹性增长，仍可能把页面整体撑长而不出现内部滚动。沿纵向 Flex 的祖先链检查高度约束和自动最小高度，找出应允许收缩的那一层，并把滚动交给真正的内容区域。
核心关键词min-height auto flex column - 0034
Flex 项默认的 min-width: auto 到底会算成多少？
代码预览区把侧栏挤出视口时，横向 Flex 项的自动最小宽度可能由不可断内容决定。对比普通段落与长代码的断行机会，分清项目盒无法收缩和内部内容越界，再按层级选择零最小宽度与局部滚动。
核心关键词min-width auto flex - 0035
怎样让 Flex 项缩到比内容还窄？min-width: 0 有什么代价？
标题盒设置零最小宽度后，盒子可以低于内容的自然宽度，长文字却仍可能画出边界。分别检查收缩因子、项目最小尺寸和内容显示规则，说明单行省略为什么还需要不换行、裁剪和溢出提示。
核心关键词min-width 0 flex 收缩 - 0036
Flex 里的文本为什么设置了省略号还会撑开容器？
评论长链接不出现省略号，可能是直接参与 Flex 的外层项目没有真正变窄，而非文本溢出规则失效。沿父子层级定位尺寸瓶颈，先让项目盒可收缩，再检查文本节点是否满足单行、省略和裁剪条件。
核心关键词flex text-overflow min-width - 0037
Flex 项缩不动时，怎样分辨是内容还是 min-width 限制？
两栏布局中的代码块越过视口，可能是右栏 Flex 项被自动最小宽度卡住，也可能只是代码在已缩小的盒子内溢出。利用开发工具逐层查看盒子边界，分别用零最小宽度和局部横向滚动解决两种不同现象。
核心关键词flex 溢出诊断 min-content min-width - 0038
Flex 项隐藏后还占位置吗？order 会怎样算？
导航项目隐藏后是否留下空位，由它是否继续生成 Flex 布局盒子决定。比较不生成盒子与只隐藏可见内容的两种方式，再结合排序属性说明视觉排列、文档节点和交互顺序之间的关系。
核心关键词flex display none visibility hidden order - 0039
flex-wrap: nowrap 下，项目总宽度超了会怎样？
手机页头限定单行时，搜索框可能先收缩，按钮碰到最小尺寸后整行才出现溢出。按基础尺寸、收缩权重和项目下限分析这个过程，并与允许换行时先分线后逐线伸缩的计算顺序对比。
核心关键词flex-wrap nowrap 溢出 - 0040
wrap-reverse 到底反转了 Flex 的什么方向？
多行标签启用反向换行，改变的是交叉轴上各条线出现的方向，不是每行项目的主轴顺序。通过固定容器宽高观察第二条线与对齐属性的变化，并区分它与反向主轴排列及 DOM 阅读顺序。
核心关键词flex-wrap wrap-reverse - 0041
中文竖排时，Flex 的主轴还一定是横向吗？
竖排书写模式下，横向名称的 Flex 行主轴可能落在屏幕竖直方向，列主轴则沿块方向。以竖排文字容器为例判断两条逻辑轴，再推导方向反转、主轴对齐和交叉轴对齐在物理屏幕上的表现。
核心关键词flex writing-mode 竖排