html - CSS Flexbox布局中flex-basis属性无法撑开容器的原因是什么？
前端 flex 布局中的项目的flex-basis属性，无法撑开容器
<body>
<div class="bottom">
<div class="terminals">
<div class="terminal"></div>
<div class="terminal"></div>
<div class="terminal"></div>
<div class="terminal"></div>
<div class="terminal"></div>
</div>
</div>
<style>
.bottom {
display: flex;
}
.terminals {
height: 200px;
background: rgba(52, 91, 112, 0.52);
display: flex;
}
.terminals .terminal {
background-color: #831818;
flex-basis: 200px;
border-radius: 10px;
}
</style>
</body>代码所示 我给 terminal 设置了flex-basis: 200px; 期望效果应该是页面上展示五个terminal，而容器 terminals 的宽度为1000px，但实际上页面上展示空白，terminal和terminals的宽度都为0，
但是我给 terminal设置 flex-shrink: 0; 属性后 页面上能展示五个terminal 但 terminals的宽度依然为0
这是为什么呢？已经咨询过各个GPT模型 均没有得到合理的解释，说明这个看似简单的问题应该没那么简单 所以求助各位老哥解答，谢谢！！
共有1个答案
在CSS Flexbox布局中，flex-basis 属性定义了flex项目在主轴方向上的基础大小，但在你给出的例子中，flex-basis 实际上是可以正常工作的，但问题可能出在容器的默认行为或其他样式设置上。
关于你遇到的问题，可能有以下几个原因：
- 容器的宽度：
默认情况下，如果flex容器的父元素没有设置宽度（或宽度为auto），并且容器本身也没有显式设置宽度，那么容器的宽度可能会由其内容决定，或者在某些情况下为0。在你的例子中，.bottom容器（flex容器的父元素）没有设置宽度，因此.terminals（flex容器）可能会根据父元素.bottom的宽度来设置自己的宽度。如果.bottom没有明确的宽度，那么.terminals的宽度可能也会是0。 - 主轴方向：
在你的例子中，flex容器的主轴方向默认为row（水平方向）。因此，flex-basis在水平方向上定义了.terminal的基础大小。然而，如果.terminals的宽度为0，那么即使.terminal设置了flex-basis: 200px;，它们也无法撑开.terminals，因为.terminals本身没有足够的空间来容纳这些元素。 - flex-shrink 属性：
当你给.terminal设置flex-shrink: 0;时，你阻止了这些元素在需要时缩小。这意味着，如果.terminals有足够的空间，.terminal将保持其flex-basis定义的宽度。但是，这不会解决.terminals宽度为0的问题。它只是确保.terminal不会缩小到小于其flex-basis定义的宽度。
解决方案：
确保.bottom（或.bottom的父元素）有一个明确的宽度。这样，.terminals（flex容器）就会有足够的空间来容纳其内部的flex项目。例如：
.bottom {
display: flex;
width: 100%; /* 或其他具体的宽度值 */
}此外，你也可以尝试给.terminals设置一个具体的宽度，但这可能不是最佳做法，因为它会限制flex布局的灵活性。
希望这可以帮助你解决问题！
-
问题内容： 设置或设置为弹性项目而不是设置之间有区别吗？ 是属性的“转折点” 吗？ 当我设置浏览器时，如何确定将项目下移到新行的哪一点？是根据他们的宽度还是“弹性基础”？ 示例：最后两个框具有相同的功能，但是当窗口在300px至400px之间时， 只有 其中一个向下移动。为什么？ 问题答案： 允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 但是，它 不是 弯曲增长/
-
我很难让Chrome注意到布局中的flex-basis部分。它在布局中运行良好。 下面的代码片段演示了这个问题：黄色、蓝色和粉红色的条是基于flex的50px、25%和75%，显示在列和行flex方向上。 如果您在Firefox（或IE11或Edge）中运行，那么列和行都按预期划分区域： 左和右之间的唯一区别是。 我尝试将添加到中，这使Chrome注意到flex的基础，但却引起了一个不同的问题--
-
多列布局 类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。 格式举例： .wrapper{ /* 分成几列 */ -webkit-column-count: 3; /* 每列之间，用分割线隔开 */ -webkit-column-rule: 1px dashed red; /* 设置列之间的间
-
问题内容： flex容器的所有子代（由或指定）都是自动生成的flex项目。弹性项目没有显示属性。取而代之的是，根据我们希望flex子项的布局方式，将其设置为其他值。 因此，如果我在Y元素上设置X值（考虑到Y参与了flex上下文，即Y是一个flex-item），我可以确定我将始终获得表现出作用的flex- item（在这种格式化上下文（在flex容器中）就像一个块级元素一样？ （换句话说，无论X =
-
问题内容： 当像hidden属性这样的属性是boolean属性时，这意味着什么？有人可以用外行的术语解释吗？ 问题答案： 2.5.2布尔属性 许多属性是布尔属性。元素上的布尔属性的存在表示真实值，而该属性的缺失表示错误值。 如果存在该属性，则其值必须为空字符串或该属性的规范名称的ASCII大小写不匹配的值，且没有前导或尾随空格。 布尔属性上不允许使用值“ true”和“ false”。为了表示一个
-
WeUI提供了快速的 flex 布局 示例代码 <template> <div class="page"> <div class="page__bd page__bd_spacing"> <div class="weui-flex"> <div class="weui-flex__item"> <div class="placeholde
-
参考 Flex 布局教程：语法篇
-
问题内容： 关于此有很多问题和文章，但据我所知，尚无定论。我能找到的最好的总结是 flex-basis 允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 …本身并没有过多说明具有 flex-basis 设置的元素的行为。以我目前对flexbox的了解，我不明白为什么那也不能描述 宽度 。 我想知道 flex-basis 与实际 宽度 有何不同： 如果我用 flex-b