inline-flex 与内联之间的区别？

Question

关于

在上面的问题中，outline-style仅在显示为inline-flex | inline-block | block

时才适用于锚点内的标题

我理解以下两者的区别：

inline-block：在其section下为每个元素创建一个特定的块，以维护每个元素的结构。

inline-flex: 不以正常形式保留任何特定的space。

但是inline和inline-flex有什么区别呢？

Answer 1

inline 中的内容仍会按照您的预期显示，但 inline-flex 中的内容将呈现弹性行为。因此，在内联元素中添加 2 <div> 将在彼此下方创建 2 个 div，而在 inline-flex 元素中添加 2 <div>，它们将彼此相邻显示

hr { margin: 3rem 0 }

.inline,
.inline-flex {
  border: 1px solid black;
  padding: 0.25rem;
}

.inline > *,
.inline-flex > * {
  border: 1px solid red;
  padding: 0.25rem;
}

.inline {
  display: inline;
}
.inline-flex{
  display: inline-flex;
}

<div>
  This is some text at the start the example divs
  &nbsp;
  <div class="inline">
    <div>Inline Child 1</div>
    <div>Inline Child 2</div>
  </div>
  &nbsp;
  This is some text between the example divs
  &nbsp;
  <div class="inline-flex">
    <div>Inline Flex Child 1</div>
    <div>Inline Flex Child 1</div>
  </div>
  &nbsp;
  This is the end of the text around the example divs
</div>

inline-flex 与内联之间的区别？

Difference between inline-flex vs inline?

html

css