[!info] related notes

• 所属 MOC: CSS MOC
• 前置概念: display, flex
• 并列概念: grid
• 使用场景: button-text-vertical-centering-on-zoom, css-baseline-and-vertical-alignment

inline-flex

一句话定义

display: inline-flex 将元素设为行内弹性容器——容器内部用 Flexbox 布局，容器本身表现像 inline-block。

核心区别：flex vs. inline-flex

两者对容器内部（子元素）的影响完全一样，区别在于容器外部的表现：

属性值	容器外部表现	宽度表现
display: flex	块级元素，独占一行	默认撑满父元素 100% 宽度
display: inline-flex	行内块元素，可与其他元素并排	宽度由内部子元素撑开（包裹性）

使用场景

A. 自适应宽度的标签或按钮

按钮宽度刚好包裹内容，同时用 Flex 做图标与文字的居中对齐：

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
  background: #eee;
}

B. 多个 Flex 容器排在同一行

两个容器都需要内部布局，但希望它们横向并排：

.toolbar-group {
  display: inline-flex;
  gap: 4px;
}

技术细节

内部布局能力不变

声明 inline-flex 后，容器内部子元素仍可使用：

• justify-content
• align-items
• flex-direction
• gap

垂直对齐

inline-flex 表现像 inline-block，受 vertical-align 影响。若容器与旁边文字没对齐：

.container {
  display: inline-flex;
  vertical-align: middle;
}

盒模型

• 可设置 width、height、margin、padding
• 未设宽度时表现为”收缩到内容宽度 (shrink-to-fit)“

快速判断

• 想让容器独占一行 → 用 flex
• 想让容器不独占一行，宽度随内容走 → 用 inline-flex

Related notes

• CSS MOC