本文探讨了CSS中的display: inline-flex和display: flex属性的差异。主要区别在于，display: flex使容器成为块级元素，占据整行，而display: inline-flex则让容器内联显示，只占用所需宽度。文章通过实例解释了两者如何影响子元素的布局，并建议根据布局需求选择合适的属性。
本文翻译自：What's the difference between display:inline-flex and display:flex?
I am trying to vertically align elements within an ID wrapper. 我正在尝试在ID包装器中垂直对齐元素。 I gave the property display:inline-flex; 我给属性display:inline-flex; to this ID as the ID wrapper is the flex container. 这个ID，因为ID包装器是flex容器。
But there is no difference in presentation. 但是在呈现方式上没有任何区别。 I expected that everything in the wrapper ID would be displayed inline . 我希望包装器ID中的所有内容都可以内inline显示。 Why isn't it? 为什么不呢
#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> #1楼
参考：https://stackoom.com/question/1R2Hu/display-inline-flex和display-flex有什么区别
#2楼
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; } 我添加了#wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } to your CSS and changed inline-flex to 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 ，您可以看到元素现在如何在页面上均匀地间隔开。
#3楼
display: inline-flex does not make flex items display inline. display: inline-flex不使flex项内联显示。 It makes the flex container display inline. 它使伸缩容器内联显示。 That is the only difference between display: inline-flex and display: flex . 那是display: inline-flex和display: flex之间的唯一区别。 A similar comparison can be made between display: inline-block and display: block , and pretty much any other display type that has an inline counterpart . 可以在display: inline-block和display: block以及几乎任何具有inline对应项的其他显示类型之间进行类似的比较。 1 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. 无论flex容器是块级还是内联级，flex布局都是相同的。 In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). 特别是，flex项本身始终像块级框一样运行（尽管它们确实具有内联块的某些属性）。 You cannot display flex items inline; 您不能内联显示弹性项目； otherwise you don't actually have a flex layout. 否则，您实际上没有弹性布局。
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. 目前尚不清楚“垂直对齐”到底是什么意思，或者为什么要真正内联显示内容，但我不确定flexbox不是您要完成的任务的正确工具。 Chances are what you're looking for is just plain old inline layout ( display: inline and/or display: inline-block ), for which flexbox is not a replacement; 机会是你要找的是什么，只是普通的老直列布局（ display: inline和/或display: inline-block ），对于这Flexbox将不补发; flexbox is not the 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 并不是所有人都声称的通用布局解决方案（我之所以这样说是因为误解可能是您首先考虑使用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. 1块布局和内联布局之间的差异不在此问题的范围内，但最突出的是自动宽度：块级框水平拉伸以填充其包含的块，而内联级框缩小以适合其容纳的块内容。 In fact, it is for this reason alone you will almost never use display: inline-flex unless you have a very good reason to display your flex container inline. 实际上，仅出于这个原因，您几乎永远不会使用display: inline-flex除非您有很好的理由以内联方式显示flex容器。
#4楼
flex and inline-flex both apply flex layout to children of the container. flex和inline-flex都将flex布局应用于容器的子级。 Container with display:flex behaves like a block-level element itself, while display:inline-flex makes the container behaves like an inline element. 具有display:flex容器本身的行为类似于块级元素，而具有display:inline-flex的容器的行为类似于内联元素。
#5楼
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. Inline-Flex-Flex的内联版本允许元素及其子元素具有flex属性，同时仍保留在文档/网页的常规流程中。 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. 基本上，如果宽度足够小，则可以将两个内联flex容器放在同一行中，而没有任何多余的样式以允许它们存在于同一行中。 This is pretty similar to "inline-block." 这非常类似于“内联块”。
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. Flex-容器及其子级具有flex属性，但是容器保留该行，因为它是从文档的正常流程中取出的。 It responds like a block element, in terms of document flow. 就文档流而言，它的响应就像一个块元素。 Two flexbox containers could not exist on the same row without excess styling. 没有多余的样式，两个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." 您可能会遇到问题的原因是因为flex和inline-flex将默认的“ flex-direction”属性设置为“ 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. 将此属性更改为“ column”将允许您的元素堆叠并保留等于其父代宽度的space（width）。
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 vs inline-flex的工作原理，以及有关inline vs block元素如何工作的快速演示...
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技巧
#6楼
Display:flex apply flex layout to the flex items or children of the container only. Display：flex仅将flex布局应用于容器的flex项或子元素。 So, the container itself stays a block level element and thus takes up the entire width of the screen. 因此，容器本身停留在块级元素上，因此占用了屏幕的整个宽度。
This causes every flex container to move to a new line on the screen. 这将导致每个flex容器在屏幕上移至新行。
Display:inline-flex apply flex layout to the flex items or children as well as to the container itself. Display：inline-flex将flex布局应用于flex项或子项以及容器本身。 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. 结果，容器就像子项一样充当内联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. 这将导致两个或多个显示为inline-flex的flex容器彼此并排对齐，直到在屏幕上占据整个宽度为止。
扫一扫
2106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
