gpt4 book ai didi

css flex-item默认高度问题

转载 作者:行者123 更新时间:2023-12-02 04:32:47 25 4
gpt4 key购买 nike

这个问题在这里已经有了答案:





How to disable equal height columns in Flexbox?

(4 个回答)


4年前关闭。




我正在学习 CSS flex-box 的东西,当我玩弄它时,我发现了一个有线的东西:

.container {
width: 100%;
display: flex;
border: 5px solid grey;
}

.box1 {
border: 2px solid red;
width: 30%;
height: 500px;
}

.box2 {
border: 2px solid blue;
width: 40%;
}
<body>
<div class="container">
<div class="box box1">
<p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
</div>

<div class="box box2">
<p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
</div>

<div class="box box3">
<p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
</div>
</div>
</body>


连线的事情是:我只将 box1 元素的高度设置为 500px,但从结果来看,我看到 box2 的高度与默认的 500px 相同,即使我没有在其上设置任何高度值。然后我将 box2 的高度值更改为 300px,并且没有在 box3 上给出固定高度:
    .box1{
border: 2px solid red;
width: 30%;
height: 500px;
}

.box2{
border: 2px solid blue;
width: 40%;
height:300px;
}


.box3{
border: 2px solid blue;
width:30%;
}

这次从结果中我发现 box3 的高度是 500px 所以我的问题是:
  • 在将容器调用为 display:flex 之后,是不是没有预先设置高度的 flex 元素将继承另一个具有最大高度值的 flex 元素?
  • 在将容器调用为 display:flex 之后,我可以认为它包含的所有元素都会表现得像 inline-block元素?
  • 最佳答案

    1. 调用container为display:flex后,是不是没有设置pre-height的flex item会继承另一个高度值最大的flex item?

    默认情况下,行中的所有元素将采用它们的最大高度。

    2. 在将容器调用为 display:flex 之后,我可以认为它包含的所有元素都会像 inline-blockelements 一样表现吗?

    是的,您可以使用 display: inline-flex (在此页面中查找 inline-flex 值以获取更多信息)。

    关于css flex-item默认高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47106934/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com