display：inline-flex和display：flex之间有什么区别？

时间：2014-12-11 08:12:47

标签： css css3 flexbox

我正在尝试在ID包装器中垂直对齐元素。我将属性display:inline-flex;赋予此ID，因为ID包装器是Flex容器。

但是演示文稿没有区别。我希望包装器ID中的所有内容都会显示inline。为什么不呢？

＆＃13;
＆＃13; 
#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
＆＃13; 
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

JSFiddle Example

9 个答案:

答案 0 :(得分：322)

display: inline-flex不会使 flex项显示为内联。它使 flex容器显示为内联。这是display: inline-flex和display: flex之间的唯一区别。可以在display: inline-block和display: block以及pretty much any other display type that has an inline counterpart之间进行类似的比较。 1

对弹性物品的影响绝对没有差别;无论Flex容器是块级还是内联级，flex布局都是相同的。特别是，flex项本身总是表现得像块级框（尽管它们确实具有内联块的一些属性）。您无法内联显示弹性项目;否则你实际上没有弹性布局。

目前尚不清楚“垂直对齐”究竟是什么意思，或者为什么要确切地显示内联内容，但我怀疑flexbox不是您想要完成的任何工具。您正在寻找的机会只是简单的旧内联布局（display: inline和/或display: inline-block），其中flexbox 不是的替代品; flexbox不是不是每个人都声称的通用布局解决方案（我说这是因为误解可能就是你首先考虑使用flexbox的原因）。

1 块布局和内联布局之间的差异超出了本问题的范围，但最突出的是自动宽度：块级框水平拉伸以填充它们的包含块，而内联级别的盒子缩小以适应其内容。事实上，仅仅因为这个原因，你几乎不会使用display: inline-flex，除非你有充分的理由在内联显示你的Flex容器。

答案 1 :(得分：49)

flex和inline-flex都将flex布局应用于容器的子级。具有display:flex的容器的行为类似于块级元素，而display:inline-flex使容器的行为类似于内联元素。

答案 2 :(得分：30)

好吧，我知道起初可能有点混乱，但display正在讨论父元素，所以当我们说：display: flex;时，它就是关于元素的，当我们说display:inline-flex;时1}}，也是使元素本身inline ...

就像制作div 内嵌或阻止，运行下面的代码段，您可以看到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>

同时快速创建下面的图像以一目了然地显示差异：

display flex vs display inline-flex

答案 3 :(得分：25)

＆＃34; flex＆＃34;之间的区别和＆＃34; inline-flex＆＃34;

简答：

一个是内联的，另一个基本上像块元素一样响应（但它有一些自己的差异）。

更长的回答：

Inline-Flex - flex的内联版本允许元素及其子元素具有flex属性，同时仍保留在文档/网页的常规流中。基本上，如果宽度足够小，您可以在同一行中放置两个内联flex容器，而不需要任何多余的样式以允许它们存在于同一行中。这与＆＃34; inline-block非常相似。＆＃34;

Flex - 容器及其子容器具有flex属性，但容器保留行，因为它从文档的正常流程中取出。就文档流而言，它像块元素一样响应。两个flexbox容器不能存在于同一行而没有多余的样式。

您可能遇到的问题

由于您在示例中列出的元素，虽然我猜测，但我认为您希望使用flex以逐行方式显示列出的元素，但继续并排查看元素

您可能遇到问题的原因是因为flex和inline-flex具有默认的＆＃34; flex-direction＆＃34;属性设置为＆＃34; row。＆＃34;这将并排显示孩子们。将此属性更改为＆＃34;列＆＃34;将允许您的元素堆叠并保留等于其父级宽度的空间（宽度）。

以下是一些示例，展示了flex与inline-flex的工作原理，以及内联与块元素如何工作的快速演示...... 

display: inline-flex; flex-direction: row;

Fiddle 

display: flex; flex-direction: row;

Fiddle 

display: inline-flex; flex-direction: column;

Fiddle 

display: flex; flex-direction: column;

Fiddle 

display: inline;

Fiddle 

display: block

Fiddle

另外，一个很棒的参考文档： A Complete Guide to Flexbox - css tricks

答案 4 :(得分：13)

显示：flex 仅将Flex布局应用于Flex容器或容器的子项。因此，容器本身保持块级元素，因此占据了屏幕的整个宽度。

这会导致每个弹性容器移动到屏幕上的新行。

显示：inline-flex 将弹性布局应用于弹性项目或子项目以及容器本身。因此，容器就像子项一样表现为内联flex元素，因此仅占用其项目/子项所需的宽度，而不是屏幕的整个宽度。

这会导致两个或多个弹性容器一个接一个地显示为内嵌 - 柔性，在屏幕上并排排列，直到整个屏幕宽度都被拍摄为止。

答案 5 :(得分：3)

为清楚起见，改用二值display语法

display CSS属性实际上同时设置了两项：外部显示类型和内部显示类型。外部显示类型会影响元素（充当容器）在其上下文中的显示方式。内部显示类型会影响元素的子代（或容器的子代）的布局方式。

如果使用二值display语法（仅在Firefox之类的某些浏览器中受支持），则两者之间的区别就更加明显了：

  • display: block等同于display: block flow
  • display: inline等同于display: inline flow
  • display: flex等同于display: block flex
  • display: inline-flex等同于display: inline flex
  • display: grid等同于display: block grid
  • display: inline-grid等同于display: inline grid

外部显示类型：block或inline：

外部显示类型为block的元素将占据可用的整个宽度，就像<div>一样。外部显示类型为inline的元素只会像<span>那样采用包裹方式占据其所需的宽度。

内部显示类型：flow，flex或grid：

内部显示类型flow是未指定flex或grid时的默认内部显示类型。例如，这是布置我们习惯在<p>中使用的子元素的方式。 flex和grid是布置孩子的新方法，每个孩子都应该拥有自己的职位。

结论：

display: flex和display: inline-flex之间的区别是外部显示类型，第一个的外部显示类型为block，第二个的外部显示类型为inline。两者的内部显示类型均为flex。

参考文献：

答案 6 :(得分：1)

您需要更多信息，以便浏览器知道您想要的内容。例如，容器的孩子需要被告知＆＃34;如何＆＃34;弯曲。

Updated Fiddle

我已将#wrapper > * { flex: 1; margin: auto; }添加到您的CSS并将inline-flex更改为flex，您可以看到这些元素现在如何在页面上均匀分布。

答案 7 :(得分：0)

您可以内联显示弹性项目，前提是您的假设是基于首先想要灵活的内联项目。使用 flex 意味着一个灵活的块级元素。

最简单的方法是使用 flex 容器，其子项设置为 flex 属性。就代码而言，这看起来像这样：

.parent{
   display: inline-flex;
}

.children{
   flex: 1;
}

flex: 1 表示一个比率，类似于元素宽度的百分比。

检查这两个链接以查看简单的实时 Flexbox 示例：

  1. https://njbenjamin.com/bundle-3.htm
  2. https://njbenjamin.com/bundle-4.htm

如果您使用第一个示例：

https://njbenjamin.com/flex/index_1.htm

您可以使用浏览器控制台，在 display 和 flex 之间更改容器元素的 inline-flex。

答案 8 :(得分：-1)

全页打开以更好地了解

.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>

相关问题
最新问题