html - 具有 flex-height 和 width : 100% 的 Flexbox children

Question

下面的代码显示了一个 <parent>由一些 <child> 组成的容器元素。

<child>元素位于 <parent> 内带有 .flex 的元素属性 (请参阅父元素中的 display: flex) 以便它们完全填充父元素。到目前为止一切正常。

但是，我现在想实现 display: flex属性仅适用于<child> 的高度项，以便它们在垂直方向上完全适合父元素。

对于宽度，我想要每个<child> 100% 周围父项的元素，因此最终它们显示为一个 block (在彼此下方而不是彼此相邻)。

我必须更改我的代码才能实现此目标吗？

你也可以找到我的代码here

html { 
height: 100%; 
}

body { 
height: 100%; 
}

.parent {
  height: 80%;
  width: 100%;
  float: left;
  
  display: flex;

    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue;
}

.parent div {
  justify-content: space-around;
  flex: 1;

    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

<div class="parent">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>

Answer 1

更改为 flex-direction: column，它们将像 block 元素一样垂直堆叠，flex: 1 将应用它们的高度。

此外，justify-content 应该在 parent 上设置，因为它是 flex 容器的一个属性，尽管当您使用 flex: 1 在 flex-item 上，它不会影响任何东西。

html,
body {
  height: 100%;
}

.parent {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.parent div {
  flex: 1;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

<div class="parent">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>