display:inline-flex和display:flex有什么区别？
display:inline-flex和display:flex有什么区别？
提问于 2014-12-11 16:12:47
我正在尝试垂直对齐ID包装器中的元素。我为这个ID赋予了属性display:inline-flex;，因为ID包装器是flex容器。
但在表现上没有区别。我希望包装器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>
回答 3
Stack Overflow用户
发布于 2014-12-13 21:17:31
flex和inline-flex都将flex布局应用于容器的子容器。具有display:flex的容器本身的行为类似于块级元素，而display:inline-flex使容器的行为类似于内联元素。
Stack Overflow用户
发布于 2014-12-12 02:22:04
您需要更多信息，以便浏览器知道您想要什么。例如，容器的子节点需要被告知“如何”伸缩。
我已经将#wrapper > * { flex: 1; margin: auto; }添加到您的CSS中，并将inline-flex更改为flex，您可以看到元素现在是如何在页面上均匀分布的。
Stack Overflow用户
发布于 2020-01-04 23:03:05
整页打开，以便更好地理解
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27418104
复制相关文章
相似问题