CSS display:inline-flex 和 display:flex 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27418104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between display:inline-flex and display:flex?
提问by astridx
I am trying to vertically align elements within an ID wrapper. I gave the property display:inline-flex;to this ID as the ID wrapper is the flex container.
我正在尝试垂直对齐 ID 包装器中的元素。我将属性display:inline-flex;赋予此 ID，因为 ID 包装器是 flex 容器。
But there is no difference in presentation. I expected that everything in the wrapper ID would be displayed inline. Why isn't it?
但是在介绍上没有区别。我预计包装器 ID 中的所有内容都会显示出来inline。为什么不是？
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>回答by BoltClock
display: inline-flexdoes not make flex itemsdisplay inline. It makes the flex containerdisplay inline. That is the only difference between display: inline-flexand display: flex. A similar comparison can be made between display: inline-blockand display: block, and pretty much any other display type that has an inline counterpart.1
display: inline-flex不会使flex 项目内联显示。它使flex 容器内联显示。这是display: inline-flex和之间的唯一区别display: flex。可以在display: inline-block和之间进行类似的比较display: block，并且几乎可以在任何其他具有内联对应项的显示类型之间进行比较。1
There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have someproperties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.
对弹性项目的影响绝对没有区别；无论 flex 容器是块级还是内联级，flex 布局都是相同的。特别是，弹性项目本身总是表现得像块级框（尽管它们确实具有内联块的一些属性）。您不能内联显示 flex 项目；否则你实际上没有弹性布局。
It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inlineand/or display: inline-block), for which flexbox is nota replacement; flexbox is notthe universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).
目前尚不清楚“垂直对齐”到底是什么意思，或者为什么要内联显示内容，但我怀疑 flexbox 不是您想要完成的任何工具的正确工具。很有可能您正在寻找的只是普通的旧内联布局（display: inline和/或display: inline-block），而 flexbox不是替代品；flexbox并不是每个人都声称的通用布局解决方案（我这么说是因为误解可能是您首先考虑 flexbox 的原因）。
1The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flexunless you have a very good reason to display your flex container inline.
1块布局和内联布局之间的区别不在本问题的范围内，但最突出的是自动宽度：块级框水平拉伸以填充其包含块，而内联级框缩小以适应它们内容。事实上，仅仅因为这个原因，你几乎永远不会使用，display: inline-flex除非你有很好的理由内联显示你的 flex 容器。
回答by Alireza
OK, I know at first might be a bit confusing, but displayis talking about the parent element, so means when we say: display: flex;, it's about the element and when we say display:inline-flex;, is also making the element itself inline...
好的，我知道一开始可能有点混乱，但这display是在谈论父元素，所以意思是当我们说：时display: flex;，它是关于元素的，当我们说时display:inline-flex;，也在使元素本身inline......
It's like make a divinlineor block, run the snippet below and you can see how display flexbreaks down to next line:
这就像制作一个divinline或block，运行下面的代码片段，您可以看到如何display flex分解到下一行：
.inline-flex {
display: inline-flex;
}
.flex {
display: flex;
}
p {
color: red;
}<body>
<p>Display Inline Flex</p>
<div class="inline-flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
<div class="inline-flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
<p>Display Flex</p>
<div class="flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
<div class="flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>Also quickly create the image below to show the difference at a glance:
还可以快速创建下图，让差异一目了然：
回答by Leo
flexand inline-flexboth apply flex layout to children of the container. Container with display:flexbehaves like a block-level element itself, while display:inline-flexmakes the container behaves like an inline element.
flex并且inline-flex都将 flex 布局应用于容器的子项。Container with 的display:flex行为就像块级元素本身，display:inline-flex而使容器的行为类似于内联元素。
回答by Leo
The Difference between "flex" and "inline-flex"
“flex”和“inline-flex”之间的区别
Short answer:
简短的回答：
One is inline and the other basically responds like a block element(but has some of it's own differences).
一个是内联的，另一个基本上像块元素一样响应（但有一些自己的差异）。
Longer answer:
更长的答案：
Inline-Flex - The inline version of flex allows the element, and it's children, to have flex properties while still remaining in the regular flow of the document/webpage. Basically, you can place two inline flex containers in the same row, if the widths were small enough, without any excess styling to allow them to exist in the same row. This is pretty similar to "inline-block."
Inline-Flex - flex 的内联版本允许元素及其子元素具有 flex 属性，同时仍保留在文档/网页的常规流中。基本上，您可以将两个内联 flex 容器放在同一行中，如果宽度足够小，没有任何多余的样式来允许它们存在于同一行中。这与“内联块”非常相似。
Flex - The container and it's children have flex properties but the container reserves the row, as it is taken out of the normal flow of the document. It responds like a block element, in terms of document flow. Two flexbox containers could not exist on the same row without excess styling.
Flex - 容器及其子项具有 flex 属性，但容器保留行，因为它是从文档的正常流中取出的。在文档流方面，它像块元素一样响应。如果没有多余的样式，两个 flexbox 容器就不能存在于同一行中。
The problem you may be having
您可能遇到的问题
Due to the elements you listed in your example, though I am guessing, I think you want to use flex to display the elements listed in an even row-by-row fashion but continue to see the elements side-by-side.
由于您在示例中列出的元素，尽管我是猜测，但我认为您想使用 flex 以均匀的逐行方式显示列出的元素，但继续并排查看元素。
The reason you are likely having issues is because flex and inline-flex have the default "flex-direction" property set to "row." This will display the children side-by side. Changing this property to "column" will allow your elements to stack and reserve space(width) equal to the width of its parent.
您可能遇到问题的原因是 flex 和 inline-flex 将默认的“flex-direction”属性设置为“row”。这将并排显示孩子。将此属性更改为“列”将允许您的元素堆叠并保留与其父元素宽度相等的空间（宽度）。
Below are some examples to show how flex vs inline-flex works and also a quick demo of how inline vs block elements work...
下面是一些示例来展示 flex 与 inline-flex 的工作原理，以及内联与块元素如何工作的快速演示......
display: inline-flex; flex-direction: row;
display: flex; flex-direction: row;
display: inline-flex; flex-direction: column;
display: flex; flex-direction: column;
display: inline;
display: block
Also, a great reference doc: A Complete Guide to Flexbox - css tricks
另外，一个很好的参考文档： Flexbox 的完整指南 - css 技巧
回答by Noor Jahan Mukammel
Display:flexapply flex layout to the flex items or children of the container only. So, the container itself stays a block level element and thus takes up the entire width of the screen.
Display:flex仅对容器的 flex 项或子项应用 flex 布局。所以，容器本身就是一个块级元素，因此占据了整个屏幕的宽度。
This causes every flex container to move to a new line on the screen.
这会导致每个 flex 容器移动到屏幕上的新行。
Display:inline-flexapply flex layout to the flex items or children as well as to the container itself. As a result the container behaves as an inline flex element just like the children do and thus takes up the width required by its items/children only and not the entire width of the screen.
Display:inline-flex将 flex 布局应用于 flex 项目或子项以及容器本身。因此，容器就像子元素一样充当内联 flex 元素，因此仅占用其项目/子元素所需的宽度，而不是整个屏幕宽度。
This causes two or more flex containers one after another, displayed as inline-flex, align themselves side by side on the screen until the whole width of the screen is taken.
这会导致两个或多个 flex 容器一个接一个地显示为 inline-flex，在屏幕上并排对齐，直到占据屏幕的整个宽度。
回答by FiSH GRAPHICS
You need a bit more information so that the browser knows what you want. For instance, the children of the container need to be told "how" to flex.
您需要更多信息，以便浏览器知道您想要什么。例如，容器的孩子需要被告知“如何”弯曲。
I've added #wrapper > * { flex: 1; margin: auto; }to your CSS and changed inline-flexto flex, and you can see how the elements now space themselves out evenly on the page.
我已添加#wrapper > * { flex: 1; margin: auto; }到您的 CSS 并更改inline-flex为flex，您可以看到元素现在如何在页面上均匀分布。
回答by Pawan Gangwani
Open in Full page for better understanding
打开整页以更好地理解
.item {
width : 100px;
height : 100px;
margin: 20px;
border: 1px solid blue;
background-color: yellow;
text-align: center;
line-height: 99px;
}
.flex-con {
flex-wrap: wrap;
/* <A> */
display: flex;
/* 1. uncomment below 2 lines by commenting above 1 line */
/* <B> */
/* display: inline-flex; */
}
.label {
padding-bottom: 20px;
}
.flex-inline-play {
padding: 20px;
border: 1px dashed green;
/* <C> */
width: 1000px;
/* <D> */
display: flex;
}<figure>
<blockquote>
<h1>Flex vs inline-flex</h1>
<cite>This pen is understand difference between
flex and inline-flex. Follow along to understand this basic property of css</cite>
<ul>
<li>Follow #1 in CSS:
<ul>
<li>Comment <code>display: flex</code></li>
<li>Un-comment <code>display: inline-flex</code></li>
</ul>
</li>
<li>
Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
<ul>
<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
<li>A with C</li>
<li>A with C & D -- Something wrong ? Keep going !</li>
<li>B with C</li>
<li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
</ul>
</li>
</ul>
</blockquote>
</figure>
<br/>
<div class="label">Playground:</div>
<div class="flex-inline-play">
<div class="flex-con">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="flex-con">
<div class="item">X</div>
<div class="item">Y</div>
<div class="item">Z</div>
<div class="item">V</div>
<div class="item">W</div>
</div>
</div>