CSS Flexbox 子项未占用全部可用宽度

Posted 2023-03-06

【中文标题】CSS Flexbox 子项未占用全部可用宽度

【英文标题】：CSS Flexbox children items not taking up full available width

【发布时间】：2020-11-19 19:27:22

【问题描述】：

我正在尝试将卡片组件的标题放在最左侧，将其他一些数据放在最右侧，如下图所示：

我为此编写的组件如下所示：

    <div className="card">
      <div className="card-title">Some Title</div>
      <div className="card-data">
        <span>`Some data: 07/22/2020`</span>
        <span>TEST</span>
      </div>
    </div>

对于 CSS，我从之前的几篇文章中看到，解决方案是将 flex-grow:1 或 flex: 1 1 auto 分配给子项。为此，我做了以下工作：

.card 
  display: flex;
  justify-content: space-between;
  .card-title 
    flex: 1;
  
  .card-data 
     flex: 1;
  

尽管将 flex-grow 指定为 1，但它并没有占用内容的全部空间，如此处突出显示的那样。

card div 确实位于组件的顶部，所以没有其他东西会影响这里的样式。这里是否需要任何其他属性/规范来使两个 div 占据整个宽度？

【问题讨论】：

试试这个：.card display: flex;弹性：1； justify-content: 之间的空格；

@dp.js 不太确定我理解这背后的基本原理。 flex: 1 属性应该在子项上，对吗？我尝试将flex: 1 添加到父级，但不幸的是，这并没有解决这个问题。

你是对的。不需要 flex:1 到父卡元素。只需 display: flex, justify-content: space-between 就可以了。可以分享一个可重现的演示吗？因为很明显，无论您尝试过什么都是正确的，并且对我们中的一些人有用

【参考方案1】：

如果您需要使.card-title 和.card-data 元素占据卡片宽度的一半，并且定位在左侧和右侧，请尝试以下操作：

.card 
  display: flex;
  justify-content: space-between;

  .card-title 
    flex-grow: 1;
  

  .card-data 
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
  

【讨论】：

得到完全相同的输出，遗憾的是。我尝试分配背景颜色以验证选择器没有弄乱，它们也没有。出于某种原因，它根本没有使用 flex-grow: 1 属性。您的解决方案对我来说很有意义，不知道为什么它不起作用。例如，如果我在card-title 卡上执行margin-right: 700px 之类的操作，则确实会将.card-data 内容一直推到右侧，但是像这样硬编码边距值在这里对我没有帮助。

您能否尝试使用浏览器开发工具检查.card 元素，看看该元素是否与容器一样宽？或者只是为.card 添加边框，看看它是只包裹文本还是整行。我想知道元素的宽度是否有问题。

【参考方案2】：

不要在卡片标题和卡片数据中使用flex: 1，只需在卡片上使用 flex 属性即可。

.card 
  display: flex;
  justify-content: space-between;

【讨论】：

这是我尝试的第一件事，不知道为什么，但这没有用。

尝试使用width: 100% 到.card 元素。

【参考方案3】：

看不出有什么问题，应该只使用您编写的内容并将flex-grow: 1 或flex: 1 应用于卡片的子元素。您的 CSS/DOM 中有其他干扰因素。

https://jsfiddle.net/cg9y3mv6/

【讨论】：

这也是我的假设，坦率地说，这让我发疯了。

可能存在某种缓存问题，或者由于某种原因 css 不适用于您的组件？有人在这里遇到过类似的问题***.com/questions/55729132/…

【参考方案4】：

实际上，您需要将元素上的类定义为类属性，而不是类名。一切都会好起来的

    <div class="card">
      <div class="card-title">Some Title</div>
      <div class="card-data">
        <span>`Some data: 07/22/2020`</span>
        <span>TEST</span>
      </div>
    </div>