我不明白，在我的情況下 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 小提琴
uj5u.com熱心網友回復：
不要使用，
flex-grow:1而是可以col-6用于兩個兄弟姐妹。你會得到你想要的輸出
uj5u.com熱心網友回復：
這是因為這就是flex-grow作業方式。
flex-grow: 1裝置：flex-grow: 1，flex-shrink: 1和flex-basis: auto與
flex:1意味著flex-grow: 1,flex-shrink: 1重要的是flex-basis: 0
因為，你的形象已經 width: 100%;縮小了。對于文本，它們的寬度未定義，因此默認情況下它們的寬度為auto.
因此，flex: 1如果您希望列大小相同，請使用！
#about {
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418300.html
標籤：