Question

这是我的代码：

＆＃13;

body {
  margin: 0;
}

#parent {
  width: 100vw;
  height: 100vh;
  display: flex;
}

#left {
  background: blue;
  height: 100%;
}

#right {
  background: purple;
  height: 100%;
}

＆＃13;

<div id="parent">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

＆＃13;

根据我的理解，如果没有为flexbox子元素指定宽度，则每个子元素都应占用相等的空间来填充父元素。因此，我认为#left和#right宽度占#parent的50％，但它们似乎只占用了他们需要的空间量。

为什么他们不是父母的50%？

Answer 1

您还需要告诉孩子，通过对两个孩子应用 flex-grow: 1 ，他们可以扩展以填充可用空间。另请注意，弹性儿童会自动占据父母的全部高度，因此您不需要height: 100%对孩子们：{/ p>

＆＃13;

body {
  margin: 0;
}

#parent {
  width: 100vw;
  height: 100vh;
  display: flex;
}

#left {
  background: blue;
  flex-grow: 1;
}

#right {
  background: purple;
  flex-grow: 1;
}

＆＃13;

<div id="parent">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

＆＃13;

flexbox的孩子不会占据容器的所有宽度

1 个答案: