Flex display: flex与display: inline-flex区别

​display: flex​和​display: inline-flex​都是用于创建 Flexbox 容器的 CSS 属

性，但它们在布局表现上有一些关键区别：

1. display: flex

• 块级元素：当你将一个元素的​display​属性设置为`flex​，该元素表现为块级元素。这意味着它会在页面上占据一整行的空间，即使其内容并不需要这么多空间。
• 容器尺寸：默认情况下，​flex​容器会扩展以占据父元素的整个宽度（在主轴为水平方向时）。
• 常用场景：​display: flex​通常用于主要布局结构，例如页面的整体布局、导航栏、侧边栏等。

2. display: inline-flex

• 内联元素：使用​inline-flex​，元素则表现为内联元素。这意味着它不会占据一整行空间，而是仅占据其内容所需的空间。
• 容器尺寸：​inline-flex​容器的宽度和高度仅足以容纳其内容。它不会自动扩展以填充父元素的宽度。
• 常用场景：​display: inline-flex​适合用于页面中需要行内布局的小部分，如小型组件、按钮组、小图标等，它们通常嵌入在文本或其他内容中。

例子

假设有以下HTML结构：

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

当应用 ​display: flex​和 ​display: inline-flex​时的表现差异：

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

• 使用 ​display: flex​，​flex-container​ 将占据整行空间。
• 使用 ​display: inline-flex​，​flex-container​的宽度只会足以容纳其三个子项， 且可以和其他内联元素（如文本）并列显示在同一行。

总的来说，选择 ​flex​还是​inline-flex​主要取决于你希望 Flexbox 容器如何在页面 流中展示和占据空间