width和height在flex容器中仍生效，但作为flex-basis的后备值；当flex-basis未设置或为auto时起作用，否则被忽略；min-width/min-height及box-sizing会影响最终尺寸计算。
flex容器里width和height还生效吗
生效，但可能被flex的默认行为覆盖。关键看是否设置了flex相关属性（如flex-grow、flex-shrink），以及父容器是否启用了弹性布局。
-
width和height是初始尺寸，相当于flex-basis的“后备值”——当没设flex-basis时，它们会被用作基准 - 如果同时写了
flex-basis: auto（默认值）且元素有width，那width就起作用；但如果写了flex-basis: 200px，width就完全被忽略 - 注意
min-width/min-height仍会干预最终尺寸，尤其在内容撑大或容器缩小时容易卡住伸缩
flex-shrink为0却还是被压缩了？
大概率是因为父容器设置了min-width: 0或min-height: 0缺失，导致子项的最小尺寸被浏览器按内容撑开，进而触发强制收缩。
- Flex项的默认
min-width是auto，意味着它不会小于内容宽度（比如一段长单词或图片） - 即使
flex-shrink: 0，只要内容本身超出了可用空间，浏览器仍可能“挤”它（尤其在无换行、无溢出控制时） - 解决方法：显式加
min-width: 0（对行内文本还常要配overflow: hidden或text-overflow: ellipsis） - Chrome/Firefox处理
min-width: auto的方式略有差异，老版本Safari更激进，默认限制更强
盒模型box-sizing对Flex项的影响在哪
影响的是flex-basis计算起点——它决定width/height是否包含padding和border。
- 当
box-sizing: border-box时，width: 200px+padding: 10px+border: 1px→ 实际内容区只剩178px，但flex-basis仍按200px算 - 而
box-sizing: content-box（默认）下，width: 200px只是内容区，加上内边距和边框后总宽变成222px，这个222px才参与flex计算 - 不统一
box-sizing会导致同一样式在不同子项上表现不一致，尤其混用input、div、img时
为什么margin: auto在Flex里能居中，但text-align: center不行
因为margin: auto在Flex容器中被赋予了新的对齐语义，而text-align只作用于行内内容，不控制块级子项位置。
-
margin: auto在Flex主轴/交叉轴上都会触发对齐逻辑（比如margin: auto可同时居中，margin: 0 auto只在主轴居中） -
text-align: center只影响当前元素内部的文本或inline子元素，对display: flex的直接子项无效 - 如果想靠
text-align“骗”出居中效果，得把子项改成display: inline-flex，但这会丢失块级特性（比如不能设width: 100%） - 注意
margin: auto在IE10–11中对交叉轴支持不稳定，需配合align-self兜底
Flex布局的尺寸行为不是“替换”盒模型，而是叠加了一层弹性计算规则。最容易被忽略的是min-width: auto的隐式约束，以及box-sizing和flex-basis之间的优先级关系——它们不报错，但会让尺寸在不同环境里悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
