flex:1如何影響彈性專案的高度？

我不明白，如何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

uj5u.com熱心網友回復：

你可以在這里閱讀它，這是一篇很棒的文章。

根據您的編輯進行編輯

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

根據您想要實作的目標，有幾種解決方案，

1. try flex: 1 1 auto;，flex-basis: auto;意思是“看看我的寬度或高度屬性”。
2. 您可以嘗試在影像上使用object-fit: contain或。object-fit: cover

無論如何，關于您的問題 -flex-grow: 1;所有元素都會增長到占據 .parent 元素的相等部分。

所以基本上，它定義了彈性專案在必要時增長的能力。它接受用作比例的無單位值。它規定了專案應該占用的彈性容器內的可用空間量。

因此，在您的代碼中，您要告訴影像填充其父 div 的整個空間（因為它在其中單獨存在）

uj5u.com熱心網友回復：

首先，您已經使用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 演示

標籤：

上一篇：在反應中過濾掉用戶

下一篇：>*和沒有它有什么區別？