挠曲如何影响图像的宽度?

Question

我不明白，在我的情况下flex如何影响图像的比例。我自己发现，这是因为width: 100%为img标签设置的。但我不明白，为什么它会以这种方式工作？

在我的案例中，如何计算每个 flex 元素的大小，为什么它不能在 2 个 flex 元素之间均匀分布完整空间？

代码如下：

#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
width: 100%;
height: 100%;
}
.column {
flex-grow: 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>

这是JS小提琴

Answer 1

首先，您应该注意flex-grow默认等于1，因此您无需设置它。然后，您需要了解"循环依赖"和"百分比大小"。

在您的情况下，您的图像应该是其父宽度的 100%，但其父项是弹性项目，其宽度取决于其内容(图像宽度)。

我在这里解释了类似的行为：当孩子依赖于父项，而父项依赖于子项时，浏览器如何计算宽度。这同样适用于您的情况，width:100%将禁用图像大小的最小贡献。就像图像最初不存在一样。

以下是浏览器将执行的步骤。

首先，每列的大小与其内容而定。没有发生收缩(就像设置flex-shrink:0)

#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
width: auto;
}
.column {
flex-shrink: 0;
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>

如果您检查每列的宽度，您将得到第一列的1604，第二列5097。您可能会得到略有不同的值，但最重要的是注意差异，这是关键。

现在两列都需要缩小以适应容器宽度。假设容器宽度等于Xpx。我们将有一个溢出(也称为自由负空间)等于(5097 + 1604) - X = 6701 - X.

每列的宽度公式为：

1st = 1604 - ((X - 6701) * 1604/6701) = 1604 - ((6701 - X) * 0.24)
2nd = 5097 - ((X - 6701) * 5097/6701) = 5097 - ((6701 - X) * 0.76)

从上面要注意的第一件事是，总和会给你X这是合乎逻辑的结果，因为两列都需要缩小，直到它们适合容器宽度。

如果你执行一些计算，你可以找到每列的宽度，你会注意到第二列总是更大。

如果X = 1000，您将拥有235.76/764.24

如果X = 800，您将拥有187.6/612.24

这就是弹性框算法背后的逻辑。收缩时两列应保持相同的比例(缩小后项目越大，项目越大)

最后，浏览器会将图像放置在具有计算宽度100%的第一列内。

---

如果没有width:100%，您将面临图像元素的最小约束，这将防止第一列缩小到超过图像大小。您的图像大小等于1604因此第一列不能变小，因此第二列将尝试缩小到0但它不能小于最长的单词，从而产生以下结果。

#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
}
.column {
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>

两列都溢出。第一个等于图像宽度，第二个等于最长的单词。

您可以通过在列上使用min-width:0来禁用此功能：

#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
}
.column {
border: 2px dashed red;
min-width:0;
}

<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>

您将获得最初计算的相同宽度，但现在列内的图像将溢出。

Answer 2

不要使用flex-grow:1相反，您可以对两个兄弟姐妹使用col-6。 你会得到你想要的输出