Question

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

<child>项目位于<parent>项目内.flex属性（请参阅父级中的display：flex），以便它们完全填写父元素。到目前为止，这一切都很好。

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

对于宽度，我希望周围父级的 100％中的每个<child>项目最终显示为块（彼此相邻而不是彼此相邻）。

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

您还可以找到我的代码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: 1时，它会赢得＆＃39 ; t影响任何事情。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

flex-direction:column;

＆＃13;

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

＆＃13;

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

＆＃13;

弹性高度和宽度的Flexbox儿童：100％

2 个答案: