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

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

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

1. display: flex

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

2. display: inline-flex

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

例子

假設(shè)有以下HTML結(jié)構(gòu)：

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

當(dāng)應(yīng)用 ?display: flex?和 ?display: inline-flex?時(shí)的表現(xiàn)差異：

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

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

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