Flex display: flex與display: inline-flex區(qū)別

?display: flex?和?display: inline-flex?都是用于創(chuàng)建 Flexbox 容器的 CSS 屬

性，但它們在布局表現(xiàn)上有一些關鍵區(qū)別：

1. display: flex

• 塊級元素：當你將一個元素的?display?屬性設置為`flex?，該元素表現(xiàn)為塊級元素。這意味著它會在頁面上占據(jù)一整行的空間，即使其內(nèi)容并不需要這么多空間。
• 容器尺寸：默認情況下，?flex?容器會擴展以占據(jù)父元素的整個寬度（在主軸為水平方向時）。
• 常用場景：?display: flex?通常用于主要布局結構，例如頁面的整體布局、導航欄、側邊欄等。

2. display: inline-flex

• 內(nèi)聯(lián)元素：使用?inline-flex?，元素則表現(xiàn)為內(nèi)聯(lián)元素。這意味著它不會占據(jù)一整行空間，而是僅占據(jù)其內(nèi)容所需的空間。
• 容器尺寸：?inline-flex?容器的寬度和高度僅足以容納其內(nèi)容。它不會自動擴展以填充父元素的寬度。
• 常用場景：?display: inline-flex?適合用于頁面中需要行內(nèi)布局的小部分，如小型組件、按鈕組、小圖標等，它們通常嵌入在文本或其他內(nèi)容中。

例子

假設有以下HTML結構：

<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

當應用 ?display: flex?和 ?display: inline-flex?時的表現(xiàn)差異：

flex-container {
    display: flex; /* 或 inline-flex */
}

• 使用 ?display: flex?，?flex-container? 將占據(jù)整行空間。
• 使用 ?display: inline-flex?，?flex-container?的寬度只會足以容納其三個子項， 且可以和其他內(nèi)聯(lián)元素（如文本）并列顯示在同一行。

總的來說，選擇 ?flex?還是?inline-flex?主要取決于你希望 Flexbox 容器如何在頁面 流中展示和占據(jù)空間