display: inline-flex 和 display: flex 都是 CSS 中用于創建彈性盒子布局（Flexbox）的屬性值，但它們之間有一些關鍵的區別，主要體現在元素如何在頁面上被渲染和它們對周圍元素的影響。
主要區別
1，塊級 vs 行內塊級
display: flex：將一個元素設置為塊級彈性容器。這意味著它會像其他塊級元素（如 <div>）一樣開始新的一行，并且可以設置寬度、高度等屬性，不會與其他塊級元素在同一行顯示。
display: inline-flex：將一個元素設置為行內塊級彈性容器。與 inline-block 類似，它允許該元素與其他行內元素在同一行顯示，而不會強制新行開始。但是，它仍然保持了作為彈性容器的所有功能。
2，外部顯示類型（External Display Type）
對于 display: flex，其外部顯示類型為塊級（block），這意味著它遵循塊級元素的布局規則。
而 display: inline-flex 的外部顯示類型為行內塊級（inline-block），這使得它可以和其他行內元素一起出現在同一行內，除非空間不足導致換行。
3，布局影響
使用 display: flex 時，該元素會占據整個可用寬度（如果未明確指定寬度的話），并且通常會獨占一行。
使用 display: inline-flex 時，元素僅占用其內容所需的寬度，并允許其他行內或行內塊級元素與其并排顯示在同一行中。
下面來看代碼示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex .box {width: 500px;background: yellow;display: flex;justify-content: space-between;}.inline-flex .box {width: 500px;background: pink;display: inline-flex;justify-content: space-between;}</style>
</head><body><div class="flex"><div class="box"><span>123</span><span>456</span></div><span>額外的</span></div><div class="inline-flex"><div class="box"><span>123</span><span>456</span></div><span>額外的</span></div>
</body></html>效果圖
工程優化)
)
