横向列表：inline-block与flex布局的实际差异对比

这问题问得太到位了！我当初刚上手Flex布局的时候，也觉得它和inline-block做横向列表没区别，直到在响应式场景和动态调整尺寸时踩了几个坑，才发现两者的底层逻辑差得不少。尤其是你关心的resize表现，咱们一个个说：

1. 天生自带的间距坑 #

inline-block元素有个老生常谈的问题：元素之间会出现默认的空白间距。这是因为浏览器会把HTML里的换行、空格当成空白字符渲染，就像你写普通文本一样。比如你在HTML里把几个inline-block的<li>换行写，它们之间会多出4-8px的空隙，得通过去掉换行、设置font-size:0或者负margin来解决。

而Flex布局的容器默认是没有这个间距的，子元素紧挨着排列，除非你主动用gap或者margin来加间距，省心多了。

2. 尺寸计算与换行触发逻辑（resize时最明显） #

这是两者最核心的差异，直接影响resize时的表现：

• inline-block：子元素的尺寸是独立的，默认按内容宽度计算，设置固定宽高就严格遵守。当容器宽度不够时，只要某一个子元素的总宽度（含默认间距）超过剩余空间，就会直接换行，不会压缩其他元素的尺寸。比如你有3个200px的inline-block元素，容器宽度500px，第三个元素直接掉去下一行，前两个还是200px。
• Flex-wrap：Flex子元素默认有flex-shrink: 1属性——这意味着当容器宽度不够时，浏览器会先尝试压缩所有子元素的宽度，直到它们的总宽度刚好适配容器，或者达到子元素的min-width（默认是内容宽度），才会触发换行。同样是3个200px的子元素，容器500px时，Flex会把每个元素压缩到约166px（500/3），只有当容器宽度小于3倍内容宽度时，才会开始换行。

如果想让Flex子元素和inline-block一样不压缩，必须手动设置flex-shrink: 0，这时候两者的换行逻辑才会接近，但还有其他差异。

3. 垂直对齐的默认行为 #

inline-block默认是基线对齐（vertical-align: baseline），如果子元素的高度不一样，比如有的带图标有的只有文字，就会出现明显的错位——矮的元素会贴着高元素的基线，看起来歪歪扭扭。你得手动设置vertical-align: top/middle才能统一对齐。

而Flex容器默认是align-items: stretch，所有子元素会自动拉伸到和容器内最高元素一样高；你也可以轻松改成align-items: center/start/end，不管子元素高度怎么变，垂直对齐始终保持一致，resize时不会出现突然错位的情况。

4. resize属性的表现差异 #

如果你给子元素加了resize: both让用户可以拖动调整尺寸，两者的表现完全不同：

• inline-block：拖动调整某一个元素的宽高后，它会像正常流里的元素一样，直接挤压周围的元素——宽度变大的话，后面的元素会被挤到下一行；宽度变小的话，后面的元素会补上来。其他元素的尺寸不会被影响，各自保持原来的大小。
• Flex-wrap：如果子元素没设flex-shrink: 0，拖动放大某一个元素时，其他子元素会被自动压缩来腾出空间，直到达到它们的min-width才会触发换行；如果设了flex-shrink: 0，拖动放大的元素会直接把后面的元素挤换行，但Flex容器会自动重新计算整个布局，比inline-block的调整更“智能”，但也可能出现你意想不到的压缩行为。

5. 溢出内容的处理 #

inline-block元素的内容溢出时，默认是直接超出元素边界显示，除非你设置overflow: hidden或者其他溢出规则。

Flex子元素的话，如果flex-shrink: 1，当内容溢出时，浏览器会先尝试压缩元素宽度来容纳内容，直到元素宽度等于min-width，才会让内容溢出；如果flex-shrink: 0，则和inline-block表现一致。

6. 旧浏览器兼容性（非细微但实际存在） #

如果你的项目需要兼容IE10及以下，Flex布局就不太好用了——IE10只支持部分Flex属性，而且flex-wrap的表现有bug。而inline-block在IE8就可以用（虽然需要触发hasLayout，比如设置zoom: 1），兼容性更好。

内容的提问来源于stack exchange，提问作者John Smith