Flexbox高度和宽度可变的儿童：100％

Question

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

<child>项位于具有.flex属性的<parent>项内（请参见display：parent中的flex），以便它们完全填充父元素。 到目前为止，所有这些工作正常。

但是，我现在想实现display: flex属性仅适用于 <child>项目的高度 ，因此它们完全垂直地适合于父元素。

对于宽度，我希望每个<child>项都占周围父级的100％ ，因此最后将它们显示为一个块（彼此下面，而不是彼此相邻） 。

要实现此目的，我必须对代码进行哪些更改？

您也可以在这里找到我的代码

 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 ，它们将像块元素一样垂直堆叠，而flex: 1将适用于其高度。

另外， justify-content应该在parent上设置，因为它是flex容器的属性，尽管在flex-item上使用flex: 1时，它不会影响任何内容。

 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> 

Answer 2

但是，我现在想实现display：flex属性仅适用于项目的高度，以便它们完全垂直地适合父元素。

对于宽度，我希望每个项目都在周围父对象的100％处，因此最后将它们显示为一个块（彼此下方而不是彼此相邻）。

将flex-direction从默认row更改为column

flex-direction:column;

 html { height: 100%; } body { height: 100%; } .parent { height: 80%; width: 100%; /* float: left; not required */ display: flex; flex-direction: column; /* set this */ 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>