inline-flex 與 inline 之間的區別？

Question

關於在錨內使用標題時未應用大綱樣式

在上述問題中，僅當顯示為inline-flex | inline-block | block時，大綱樣式才適用於錨點內的標題。 inline-flex | inline-block | block

我理解以下之間的區別：

inline-block ：為每個元素在其部分下創建一個特定的塊，以維護每個元素的結構。

inline-flex ：不以正常形式保留任何特定空間。

但是inline和inline-flex有什么區別？

Answer 1

inline中的內容仍將顯示您的期望，但inline-flex中的內容將采用 flex 行為。 因此，在 inline 元素中添加 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>