关于CSS：display：inline-flex和display：flex有什么区别？


What's the difference between display:inline-flex and display:flex?

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

但是在呈现方式上没有什么区别。 我希望包装器ID中的所有内容都将显示为inline。 为什么不呢

1
2
3
4
#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
1
2
3
4
5
6
7
8
9
<body>
   
        <header>header</header>
        <nav>nav</nav>
        aside</aside>
        <main>main</main>
        <footer>footer</footer>
   
</body>

display: inline-flex不会使弹性项目内联显示。它使伸缩容器内联显示。这是display: inline-flex和display: flex之间的唯一区别。在display: inline-block和display: block之间以及几乎任何具有内联副本的其他显示类型之间都可以进行类似的比较。1

弹性项目的效果绝对没有区别；无论flex容器是块级还是内联级，flex布局都是相同的。特别是，弹性项目本身始终像块级框一样运行(尽管它们确实具有内联块的某些属性)。您不能内联显示弹性项目；否则，您实际上没有弹性布局。

目前尚不清楚"垂直对齐"到底是什么意思，或者为什么要真正内联显示内容，但我不确定flexbox不是您要完成的任何事情的正确工具。您所寻找的机会仅仅是普通的旧式内联布局(display: inline和/或display: inline-block)，而flexbox不能替代它。 flexbox不是每个人都声称的通用布局解决方案(我之所以这样说是因为误解可能是您首先考虑使用flexbox的原因)。

1 块布局和行内布局之间的差异不在此问题的范围内，但最突出的是自动宽度：块级框水平拉伸以填充其包含的块，而行内框则缩小以适合他们的内容。实际上，仅出于这个原因，除非您有充分的理由来内联显示flex容器，否则您几乎永远不会使用display: inline-flex。

相关讨论

好的，我知道一开始可能有些混乱，但是display在谈论父元素，所以这意味着当我们说：display: flex;时，它是关于元素的，而当我们说display:inline-flex;时，也在使元素本身inline ...

就像制作一个div内联或块，运行下面的代码片段，您可以看到display flex如何分解为下一行：

1
2
3
4
5
6
7
8
9
10
11
.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<body>
  <p>
Display Inline Flex
</p>
 
    <header>header</header>
    <nav>nav</nav>
    aside</aside>
    <main>main</main>
    <footer>footer</footer>
 

 
    <header>header</header>
    <nav>nav</nav>
    aside</aside>
    <main>main</main>
    <footer>footer</footer>
 

  <p>
Display Flex
</p>
 
    <header>header</header>
    <nav>nav</nav>
    aside</aside>
    <main>main</main>
    <footer>footer</footer>
 

 
    <header>header</header>
    <nav>nav</nav>
    aside</aside>
    <main>main</main>
    <footer>footer</footer>
 
</body>

还可以快速创建以下图像，以一眼看出差异：

display flex vs display inline-flex

相关讨论

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

" flex"和" inline-flex"之间的区别

简短答案：

一个是内联的，另一个基本上像块元素一样响应(但有一些不同)。

更长的答案：

Inline-Flex-Flex的内联版本允许元素及其子元素具有flex属性，同时仍保留在文档/网页的常规流程中。基本上，如果宽度足够小，则可以将两个内联flex容器放在同一行中，而没有任何多余的样式以允许它们存在于同一行中。这非常类似于"内联块"。

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

您可能遇到的问题

由于您在示例中列出了元素，尽管我猜测是这样，但我想您想使用flex以均匀的逐行方式显示列出的元素，但继续并排查看这些元素。

您可能会遇到问题的原因是因为flex和inline-flex将默认的" flex-direction"属性设置为" row"。这将并排显示子级。将此属性更改为" column"将允许您的元素堆叠并保留等于其父代宽度的space(width)。

以下是一些示例以展示flex vs inline-flex的工作原理，以及有关inline vs block元素如何工作的快速演示...

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

小提琴

1
display: flex; flex-direction: row;

小提琴

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

小提琴

1
display: flex; flex-direction: column;

小提琴

1
display: inline;

小提琴

1
display: block

小提琴

另外，一个很棒的参考文档：
Flexbox完整指南-CSS技巧

Display：flex仅将flex布局应用于容器的flex项或子项。因此，容器本身停留在块级元素上，因此占据了屏幕的整个宽度。

这将导致每个flex容器在屏幕上移至新行。

Display：inline-flex将flex布局应用于flex项或子元素以及容器本身。结果，容器就像子项一样充当内联flex元素，因此仅占用其项目/子项所需的宽度，而不是占据屏幕的整个宽度。

这将导致两个或多个显示为inline-flex的flex容器彼此并排对齐，直到在屏幕的整个宽度上对齐为止。

相关讨论

为清楚起见，改用二值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的元素将占用可用的整个宽度，就像一样。外部显示类型为inline的元素将仅占用其所需的宽度，并像一样进行包裹。

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

当未指定flex或grid时，内部显示类型flow是默认的内部显示类型。例如，这是布置我们习惯于

的子元素的方式。 flex和grid是布置孩子的新方法，每个孩子都应该拥有自己的职位。

结论：

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

参考文献：

  • mozzilla.org上CSS Display属性的二值语法
相关讨论

您需要更多信息，以便浏览器知道您想要什么。例如，需要告知容器的子代"如何"弯曲。

更新小提琴

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

相关讨论

在全页中打开以更好地了解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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 */
  /*    */
/*   display: inline-flex; */
\t
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<figure>
  <blockquote>
     Flex vs inline-flex
    <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 <wyn>display: flex</wyn>
</li>

         
<li>
Un-comment <wyn>display: inline-flex</wyn>
</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>

\t\t\t\t\t
<li>
A with D -- does this do same job as <wyn>display: inline-flex</wyn>. 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 <wyn>.flex-con</wyn>. That's the only usecase
</li>

       
</ul>

     
</li>

   
</ul>

  </blockquote>
 
</figure>
<br/>
 Playground:

 
    1
    2
    3
    4
 
 
    X
    Y
    Z
    V
    W