Flex 项目正在收缩到 Flex-Bas 以下

Question

我一直在阅读堆栈溢出问题和其他关于应flex-basis该做什么的博客，但我仍然无法完全理解它如何影响元素的行为。

这是我的代码的示例：

.item {
  background-color: red;
  border: 1px solid pink;
  margin: 10px;
  padding: 10px;
}

.container {
  display: flex;
}

.container .item {
  height: 50px;
  flex-grow: 1;
}

.container3 {
  flex-direction: row;
  width: 500px;
}

.container3 .a,
.container3 .b {
  flex-basis: 200px;
}

<div class="container container3">
  <div class="item a">Segmentation fault</div>
  <div class="item b">Null pointer exception</div>
  <div class="item c">hello</div>
  <div class="item d">hello</div>
</div>

我将flex-basis项目设置为 200px a，b但它们都比200px宽度短。我的印象flex-basis是项目的“初始”宽度，意味着项目的“最小宽度”。但显然这不是真的，所以我不明白“初始”是什么意思。

计算item宽度a以及b给定像素值时的具体数学公式是什么flex-basis？

Answer 1

Flex 容器的初始设置是flex-shrink: 1。

这意味着弹性项目可以收缩，以免溢出容器。

一旦禁用此功能，弹性项目将不会缩小到低于其指定flex-basis值。

* { flex-shrink: 0; } /* NEW */

.item {
  background-color: red;
  border: 1px solid pink;
  margin: 10px;
  padding: 10px;
}

.container {
  display: flex;
  border: 1px dashed black;
}

.container .item {
  height: 50px;
  flex-grow: 1;
}

.container3 {
  flex-direction: row;
  width: 500px;
}

.container3 .a,
.container3 .b {
  flex-basis: 200px;
}

<div class="container container3">
  <div class="item a">Segmentation fault</div>
  <div class="item b">Null pointer exception</div>
  <div class="item c">hello</div>
  <div class="item d">hello</div>
</div>

我将flex-basis项目设置为 200px a，b但它们的宽度都小于 200px。我的印象flex-basis是项目的“初始”宽度，意味着项目的“最小宽度”。但显然这不是真的，所以我不明白“初始”是什么意思。

事实上，这是真的。flex-basis设置项目的初始长度。正如您所定义的，您的项目的初始宽度为 200px。然后 应用flex-shrink和。flex-grow

计算item宽度a以及b给定像素值时的具体数学公式是什么flex-basis？

计算说明如下：

• flex-shrink 如何影响 padding 和 border-box？