为什么flex-shrink在inline-flex中不起作用

Question

为什么项目不缩小内联用品。但是它在正常的弹性中正常工作。也许应该这样起作用，我不知道。也许它是规格中的某个地方，但我找不到任何相关的东西。如果有人能解释这一点，我会很感激。

.container {
  width: 100px;
  margin 0 auto;
  margin-top: 100px;
  background-color: green;
}

.inline-flex {
  display: inline-flex;
  margin-bottom: 10px;
}

.flex {
  display: flex;
}

.item {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background-color: blue;
}

<div class="container">
  <div class="inline-flex">
    <div class="item">no-shrink</div>
    <div class="item">no-shrink</div>
    <div class="item">no-shrink</div>
  </div>
  <div class="flex">
    <div class="item">shrink</div>
    <div class="item">shrink</div>
    <div class="item">shrink</div>
  </div>  
</div>

Answer 1

如前所述，flex的作用像block和inline-flex-flex喜欢inline-block孩子的行为相同。 flex-items .Item在外观相同时的行为完全不同，因为它们的行为受Flex-Container的影响（.flex和.inline- flex）。除了具有不同的显示值的弹性容器外，没有其他差异。

• 每个.Item的.inline-flex保留了50px的宽度
• .Item 的 .flex 具有宽度为34.6687px，

我仍然没有弄清楚为什么这是为什么，但是我有3种不同的解决方案：

.container太小，增加宽度。

参见示例a

图i

.container {
  width: 200px;
/* Increase .container to at least the .offsetWidth of the 3 .item`s */

更改flex> flex .Item s的属性或分配最小宽度

参见示例B

图II

.B .item {
  flex: 0 0 50px;
  /* OR */
  /* min-width: 50px */
}

*,
::before,
::after {
  box-sizing: border-box;
}

.container {
  width: 100px;
  background-color: green;
}

.A {
  width: 200px;
}

.inline-flex {
  display: inline-flex;
  margin-bottom: 10px;
}

.flex {
  display: flex;
}

.item {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background-color: blue;
}

.B .item {
  flex: 0 0 50px;
  /* OR */
  /* min-width: 50px */
}

h3 {
  margin: 0 0 4px 0
}

<h3>OP</h3>
<div class="container">
  <div class="inline-flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
  <div class="flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
</div>
<h3>Example A</h3>
<div class="container A">
  <div class="inline-flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
  <div class="flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
</div>
<h3>Example B</h3>
<div class="container B">
  <div class="inline-flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
  <div class="flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
</div>