Question

我正在学习CSS flex-box的东西，当我玩它的时候，我找到了一个有线的东西：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

有线的事情是：我已经将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之后，没有预先设置高度的弹性项目是否会继承具有最大高度值的其他弹性项目？
在将容器调用为display:flex之后，我可以认为其所有包含的项目都会像inline-block个元素一样吗？

Answer 1

1。在将容器调用为display：flex之后，没有预先设置高度的弹性项目是否会继承具有最大高度值的其他弹性项目？

默认情况下，行中的所有项目都将占用它们的最大高度。

2。在将容器调用为display：flex之后，我可以认为其所有包含的项目都会像内联块元素一样吗？

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

css flex-item默认高度问题

1 个答案: