inline-flex 与 flex 有何不同？

Question

我试图理解使用

inline-flex

属性时

flex

和

display

之间的区别。

这是我的CSS代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.cars{
    width: 50px;
    height: 100px;
    border-radius: 10px;
    border-color: rebeccapurple;
    border-width: 20px;
    display: flex;
}
.hyundai{
    display: inline-flex;
}
.mercedez{
    display: inline-flex;
}

它按行显示现代，但按列显示梅赛德斯。我不明白。我什至没有设置flex-direction。容器的宽度如何影响显示？

Answer 1

它们之间差异的说明。

• display: flex

  的行为类似于

  display: block

• display: inline-flex

  的行为类似于

  display: inline-block

.d1 {
  display: flex;
}

.d2 {
  display: inline-flex;
}

.d1, .d2 {
  border: 2px solid red;
  gap: 0.5em;
}

.d1>*, .d2>* {
  border: 2px solid blue;
}

aaa
<div class="d1">
  <span>regular</span>
  <span>flex</span>
</div>
bbb
<br><br><br><br>
ccc
<div class="d2">
  <span>inline</span>
  <span>flex</span>
</div>
ddd