问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS Flexbox布局中flex-basis属性无法撑开容器的原因是什么？

头像
若风
    313
    新手上路，请多包涵

    前端 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模型 均没有得到合理的解释，说明这个看似简单的问题应该没那么简单 所以求助各位老哥解答，谢谢！！

    cssflexboxhtml
    阅读 1.7k
    avatarAI BotBETA

    在CSS Flexbox布局中，flex-basis 属性定义了flex项目在主轴方向上的基础大小，但在你给出的例子中，flex-basis 实际上是可以正常工作的，但问题可能出在容器的默认行为或其他样式设置上。

    关于你遇到的问题，可能有以下几个原因：

    1. 容器的宽度：
      默认情况下，如果flex容器的父元素没有设置宽度（或宽度为auto），并且容器本身也没有显式设置宽度，那么容器的宽度可能会由其内容决定，或者在某些情况下为0。在你的例子中，.bottom 容器（flex容器的父元素）没有设置宽度，因此.terminals（flex容器）可能会根据父元素.bottom的宽度来设置自己的宽度。如果.bottom没有明确的宽度，那么.terminals的宽度可能也会是0。
    2. 主轴方向：
      在你的例子中，flex容器的主轴方向默认为row（水平方向）。因此，flex-basis 在水平方向上定义了.terminal的基础大小。然而，如果.terminals的宽度为0，那么即使.terminal设置了flex-basis: 200px;，它们也无法撑开.terminals，因为.terminals本身没有足够的空间来容纳这些元素。
    3. 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布局的灵活性。

    希望这可以帮助你解决问题！

    2 个回答
    得票最新
    头像
    陟上晴明
      21.4k144991
      头像
      Undest
        2.4k2517

        当容器的 display 设置为 flex 之后，会打破 div 元素默认的 width:100% 的样式。
        因为 flex 布局下，默认其内部的元素会有 flex-grow:0 和 flex-shrink:1 属性，会被自动收缩。

        所以给你的 .terminals 元素显式设置 width:1000px，或者修改 .terminals 元素设置flex-basis 属性为 1000px 或者 flex-grow 属性设置为 1 就可以了。

        相关阅读

        flex - CSS：层叠样式表 | MDN

        头像
        Undest
          2.4k2517
          我给 terminal 设置了flex-basis: 200px; 期望效果应该是页面上展示五个terminal，而容器 terminals 的宽度为1000px，但实际上页面上展示空白，terminal和terminals的宽度都为0

          展示空白的原因是父盒子terminals没有宽度，所以每个子盒子terminal试着去获得200px的宽度空间时没有足够的空间可以获取，你得给父盒子一个宽度，如果父盒子空间刚好等于盒子的宽度总和(这里是flex-basis之和1000px)，那就刚好五个盒子正好占满，如果小于，那不够的空间按照flex-shrink的规则来，如果大于，那剩下的空间按照flex-grow的规则来

          .terminals {
  height: 200px;
  background: rgba(52, 91, 112, 0.52);
  display: flex;
  width: 1000px/800px/1200px;//看看不同的效果
}

          如果你不想限制死父盒子的宽度，那么就需要在盒子内部加上内容来把它撑开
          如果我们把子盒子terminal的flex-basis换成width，那么盒子的宽度就会变成固定宽度，同样也时能显示出它占据的空间的

          .terminals .terminal {
    background-color: #831818;
    width: 200px;
    border-radius: 10px;
}
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题