css - 水平列表：inline-block vs flex

Question

给定一个水平列表，以下之间的实际区别是什么：

• 正常流程，所有元素都是display: inline-block.

和

• 列表根是display:flex; flex-flow: wrap;.

我已经在不同的尺寸上对其进行了测试，并没有发现任何差异，但也许还有一些更微妙的含义，尤其是子元素如何调整大小？

标签： cssflexbox

Answer 1

display:flex;提供了一些关于项目水平和垂直对齐的更多选项，以及关于它们大小的调整：在 flex 方向上收缩或增长以及在横轴方向上对齐它们的大小。inline-blocks 只需水平排列，保持其原始宽度和高度，并根据其vertical-align参数设置垂直对齐。