灵活高度和宽度的Flexbox儿童：100％

Question

下面的代码显示<parent>容器，其中包含一些<child>项目。

的<child>项目被定位在<parent>项内部与.flex属性（见屏幕显示：挠曲在父）所以它们恰好填满的父元素。迄今为止，这一切都很好。

不过，现在我要实现的是，display: flex财产仅适用于<child>项目的高度所以他们完全适合父元素垂直。

对于宽度我希望每个<child>项中的100％周边母体的所以最终它们被显示为块（下面彼此而不是彼此相邻）。

为了达到这个目的，我需要更改哪些代码？

您也可以找到我的代码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，他们将垂直堆叠，像块元素呢，和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

不过，我现在要实现这一目标显示：柔性属性仅适用于项目的高度，使他们完全适合父元素垂直。

对于宽度，我希望每个项目都在周围父项的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>