我试图在ID包装器内垂直对齐元素。我给属性display:inline-flex;作为ID包装器的伸缩容器。
但是在表现上没有区别。我期望包装器ID中的所有内容都将内联显示。为什么不是呢?
#包装{ 显示:inline-flex; /*无差异显示:flex;* / ｝ 身体< > < div id = "包装" > <标题>标题头> < / <导航> nav < / nav > 除了除了除了< > < / > 主要主要主要< > < / > < / > <页脚页脚页脚> < / div > < /身体>
当前回答
您可以内联显示伸缩项，前提是您的假设是基于首先需要灵活的内联项。使用flex意味着一个灵活的块级元素。
最简单的方法是使用flex容器，并将其子容器设置为flex属性。在代码方面，它看起来像这样:
.parent{
display: inline-flex;
}
.children{
flex: 1;
}
Flex: 1表示比率，类似于元素宽度的百分比。
检查这两个链接，以查看简单的Flexbox实例:
https://njbenjamin.com/bundle-3.htm https://njbenjamin.com/bundle-4.htm
如果你用第一个例子:
https://njbenjamin.com/flex/index_1.htm
您可以摆弄浏览器控制台，在flex和内联flex之间更改容器元素的显示。
其他回答
您可以内联显示伸缩项，前提是您的假设是基于首先需要灵活的内联项。使用flex意味着一个灵活的块级元素。
最简单的方法是使用flex容器，并将其子容器设置为flex属性。在代码方面，它看起来像这样:
.parent{
display: inline-flex;
}
.children{
flex: 1;
}
Flex: 1表示比率，类似于元素宽度的百分比。
检查这两个链接，以查看简单的Flexbox实例:
https://njbenjamin.com/bundle-3.htm https://njbenjamin.com/bundle-4.htm
如果你用第一个例子:
https://njbenjamin.com/flex/index_1.htm
您可以摆弄浏览器控制台，在flex和内联flex之间更改容器元素的显示。
打开整页以便更好地理解
.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>
好吧，我知道一开始可能会有点混乱，但display指的是父元素，所以当我们说:display: flex;时，它指的是元素而当我们说display:inline-flex;时，它也使元素本身成为内联的。
这就像创建一个div内联或块，运行下面的代码片段，你可以看到如何显示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>
也可以快速创建下面的图像，一目了然地显示差异:
显示:只对容器的伸缩项或子项应用伸缩布局。因此，容器本身仍然是块级元素，因此占据了屏幕的整个宽度。
这将导致每个伸缩容器移动到屏幕上的新行。
显示:内联伸缩将伸缩布局应用到伸缩项或子项以及容器本身。结果，容器就像子元素一样表现为内联flex元素，因此只占用它的项/子元素所需的宽度，而不是整个屏幕的宽度。
这将导致显示为内联伸缩的两个或多个伸缩容器依次在屏幕上并排对齐，直到获得屏幕的整个宽度。
“flex”和“inline-flex”的区别
简短的回答:
一个是内联的，另一个基本上像块元素一样响应(但有一些自己的区别)。
再答:
内联flex - flex的内联版本允许元素及其子元素具有flex属性，同时仍然保持在文档/网页的常规流中。基本上，如果宽度足够小，您可以将两个内联flex容器放在同一行中，而不需要任何多余的样式来允许它们存在于同一行中。这与“内联块”非常相似。
Flex——容器及其子容器具有Flex属性，但容器保留该行，因为该行是从文档的正常流中取出的。就文档流而言，它像块元素一样响应。如果没有多余的样式，两个flexbox容器就不能存在于同一行上。
你可能遇到的问题
由于您在示例中列出的元素，尽管我是猜测，但我认为您希望使用flex以均匀的逐行方式显示列出的元素，但仍然可以并排查看这些元素。
您可能遇到问题的原因是flex和inline-flex将默认的“flex-direction”属性设置为“row”。这将显示两个孩子并排在一起。将此属性更改为“column”将允许元素堆叠并保留与其父元素宽度相等的空间(宽度)。
下面是一些演示flex和内联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
小提琴
还有一个很好的参考文档: 一个完整的指南Flexbox - css技巧
