flex: 1 如何影响 flex 项目的高度？

Question

我无法理解，flex: 1如何影响元素的高度，即使我将section的高度设置为500px，图像也会超出该部分。

代码如下：

#about {
  height: 500px;
}

.row {
  display: flex;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.column {
  flex: 1;
}

<section id="about">
  <div class="row">
    <div class="column">
      <img src="https://i.stack.imgur.com/yat2N.jpg" alt="">
    </div>
    <div class="column"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam dicta dolore suscipit quidem, hic nihil aliquid officia porro illum! Necessitatibus cupiditate, sapiente cum recusandae tenetur dolore veritatis in temporibus perferendis.
      Ex corrupti voluptatibus eaque aliquam quis soluta veniam non dicta repellendus ea iure temporibus assumenda placeat accusantium quae iste, corporis maxime dolorum quisquam neque est sint asperiores doloribus. Quibusdam ducimus saepe distinctio
      illum veniam voluptates amet quod perferendis dolorem, deleniti mollitia. Ab aperiam, ea itaque tempore molestias ullam sint accusamus totam reiciendis laborum. At natus consequatur ex officia. Porro dolor accusamus blanditiis nam commodi provident
      assumenda facere adipisci perferendis. </div>
  </div>
</section>

能否解释一下 flex: 1 影响 img 或其他项目高度的原因和方式。

Answer 1

你可以阅读它 here，这是一个伟大而透彻的 post。

根据您的编辑进行编辑

flex: 1; 等同于 flex: 1 1 0;

所以当你调用它的时候，它实际上是这样的：

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33

根据你想要达到的目的，有几种解决方案，

尝试flex: 1 1 auto;，flex-basis: auto;表示“看我的宽度或高度属性”。
您可以尝试在图像上使用 object-fit: contain 或 object-fit: cover。

在任何情况下，关于你的问题 - flex-grow: 1; 所有元素都会增长以占据 .parent 元素的相等部分。

所以基本上，它定义了弹性项目在必要时增长的能力。它接受一个作为比例的无单位值。它规定了项目应占用弹性容器内的可用空间space。

所以在您的代码中，您告诉图像填充其父级 div 的整个 space（因为它单独在其中）

Answer 2

首先，您已经用 display: flex 定义了容器。默认的 flex-direction 是 row.

这表示主轴是水平的。

因此，flex 属性正在控制宽度。对身高没有影响。

您必须移动主轴（通过添加 flex-direction: column）才能垂直应用 flex 属性。

其次，如果把height: 500px改成min-height: 500px，就解决了溢出问题（不用改flex-direction）。

#about {
  min-height: 500px;
  border: 2px solid blue;
}

.row {
  display: flex;
  border: 2px solid black;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.column {
  flex: 1;
  border: 2px dashed red;
}

<section id="about">
  <div class="row">
    <div class="column">
      <img src="https://i.stack.imgur.com/yat2N.jpg" alt="">
    </div>
    <div class="column"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam dicta dolore suscipit quidem, hic nihil aliquid officia porro illum! Necessitatibus cupiditate, sapiente cum recusandae tenetur dolore veritatis in temporibus perferendis.
      Ex corrupti voluptatibus eaque aliquam quis soluta veniam non dicta repellendus ea iure temporibus assumenda placeat accusantium quae iste, corporis maxime dolorum quisquam neque est sint asperiores doloribus. Quibusdam ducimus saepe distinctio
      illum veniam voluptates amet quod perferendis dolorem, deleniti mollitia. Ab aperiam, ea itaque tempore molestias ullam sint accusamus totam reiciendis laborum. At natus consequatur ex officia. Porro dolor accusamus blanditiis nam commodi provident
      assumenda facere adipisci perferendis. </div>
  </div>
</section>

jsFiddle demo

Answer 3

不是，align-items 的默认值为 normal，在 flexbox 上下文中与 align-items: stretch 相同。

这会导致两个 flex 子项（带有图像的 .column 和带有文本的 .column）高度相同。

当文字高于图片时，图片容器会拉伸。如果图像更高，文本容器会拉伸。

要删除此效果，请添加

.row {
  align-items: flex-start;
}

让项目与顶部对齐而不拉伸 flex 子项。

flex: 1 如何影响 flex 项目的高度？

How flex: 1 affects height of flex items?

html

css

flexbox

根据您的编辑进行编辑