flex项目的flex-grow和width之间的不一致[重复]

Posted 2023-03-06

【中文标题】flex项目的flex-grow和width之间的不一致[重复]

【英文标题】：Inconsistency between flex-grow and width on flex items [duplicate]

【发布时间】：2020-07-20 13:17:40

【问题描述】：

我正在玩弄 Flexbox，试图从基础层面学习它。我对在弹性项目上独立使用 flex-grow 和 width 导致的不一致结果感到困惑。

假设我有以下 html：

<div class="flex-container">
  <div id="flex-item-1">1</div>
  <div id="flex-item-2">2</div>
</div>

以及以下 CSS：

.flex-container 
  display: flex;


/* 
Within #flex-item-1 and #flex-item-2, toggle between
flex-grow and width to view the different resultant widths 
*/

#flex-item-1 
  flex-grow: 3;
  background-color: tomato;
  width: 75%;


#flex-item-2 
  flex-grow: 1;
  background-color: pink;
  width: 25%;

当#flex-item-1 和#flex-item-2 的width CSS 属性处于活动状态但flex-grow 属性未激活时，您可以看到网格线（由下面的HTML 和CSS 代码制作）与#flex-item-1 和 #flex-item-2 完美。

<!-- 12-column grid lines -->
<div class="flex-container">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
</div>

.col 
    box-sizing: border-box;
    border-left: 1px solid green;
    width: 8.333333%;
    height: 100px;

但是，当 flex-grow 属性处于活动状态而 width 属性未处于活动状态时，弹性项目不会与网格完全对齐：

这是为什么？

随意在this Codepen 上玩这个例子。

【参考方案1】：

您需要将 flex-items 的 flex-basis 属性设置为 0%

#flex-item-1 
  flex-basis: 0%;
  flex-grow: 3;
  background-color: tomato;
/*   width: 75%; */


#flex-item-2 
  flex-basis: 0%;
  flex-grow: 1;
  background-color: pink;
/*   width: 25%; */

它指定弹性项目的初始大小，在任何可用空间根据弹性因子分配之前。 在 flex 简写中省略时，其指定值为长度为零。 Source: mdn

Stackblitz example

【参考方案2】：

你应该在#flex-item-1和#flex-item-2上加上flex: 1;，否则文字或内容会影响#flex-item-1的宽度...

尝试从#flex-item-1 中删除文本，您会发现一切正常。