柔韧性项目在柔韧性基础以下收缩 [英] Flex items are shrinking below flex-basis

问题描述

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

I've been reading stack overflow questions and other blogs on what flex-basis is supposed to do, but I still can't fully grasp how it affects the behaviour of an element.

以下是我的代码示例:

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

我将 a 和 b 的 flex-basis 设置为200px，但它们都短于 200px 宽度.我的印象是 flex-basis 是项目的初始"宽度，意思是项目的最小宽度".但是显然这是不对的，所以我不明白初始"的含义.

I set flex-basis to 200px for items a and b but they are both shorter than 200px width. I was under the impression that flex-basis is the "initial" width of the item, meaning "min-width" of an item. But clearly that's not true, so I don't understand what "initial" means.

当为 flex-basis 指定像素值时，用于计算项目 a 和 b 的宽度的具体数学公式是什么?

What is the specific mathematical formula that calculate the width of item a and b when a pixel value is given for flex-basis?

推荐答案

flex容器的初始设置为

An initial setting of a flex container is flex-shrink: 1.

这意味着弹性物品可以收缩，以免容器溢出.

This means that flex items are allowed to shrink in order to not overflow the container.

禁用此功能后，弹性项目将不会缩小到其指定的 flex-basis 值以下.

Once you disable this feature, flex items won't shrink below their specified flex-basis values.

* { 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>

我将 a 和 b 的 flex-basis 设置为200px，但宽度均小于200px.我的印象是 flex-basis 是项目的初始"宽度，意思是项目的最小宽度".但是显然那是不对的，所以我不明白初始"的含义.

I set flex-basis to 200px for items a and b but they are both shorter than 200px width. I was under the impression that flex-basis is the "initial" width of the item, meaning "min-width" of an item. But clearly that's not true, so I don't understand what "initial" means.

实际上，这是事实. flex-basis 设置项目的初始长度.根据您的定义，项目的初始宽度为200像素. 然后 应用 flex-shrink 和 flex-grow .

Actually, it is true. flex-basis sets the initial length of the item. The initial width of your items is 200px, as you defined. Then flex-shrink and flex-grow are applied.

当为 flex-basis 指定像素值时，用于计算项目 a 和 b 的宽度的具体数学公式是什么?

What is the specific mathematical formula that calculate the width of item a and b when a pixel value is given for flex-basis?

计算在这里说明:

• 弹性收缩在填充和边框中的影响如何?

这篇关于柔韧性项目在柔韧性基础以下收缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！