柔性高度和宽度的Flexbox儿童：100％ [英] Flexbox children with flex-height and width: 100%

问题描述

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

< child> 项目位于< parent> .flex 属性（请参阅display：flex in the parent），以便它们完全填充父元素。所有这一切工作到目前为止。

但是，我想现在实现显示：flex 属性仅适用于< child> 项目的高度，因此它们垂直正好适合父元素。

对于宽度，我希望每个< child> strong> 100％，所以最后他们显示为一个块（彼此下面，而不是彼此相邻）。。

在我的代码中，为了达到这个目的，我需要做些什么改变？

您也可以找到我的代码 here

  html {height：100％; } body {height：100％; } .parent {height：80％;宽度：100％;向左飘浮;显示：flex;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：blue;}。parent div {justify-content：space-around; flex：1;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：green;}  

< div class = 亲本 > < DIV> 1.0菜单< / div> < DIV> 2.0菜单< / div> < DIV> 3.0菜单< / div> < DIV> 4.0 Menu< / div>< / div>




解决方案

更改为 flex-direction：column 并且它们将垂直堆叠，就像块元素一样， flex： 1 将适用于他们的身高。

另外， justify-content 应该是因为它是flex容器的一个属性，所以在父上设置，尽管在flex上使用 flex：1 -item，它不会影响任何东西。

<，c $ c> html，body {height ：100％;}。parent {height：80％;宽度：100％;显示：flex; flex-direction：列; justify-content：space-around;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：blue;}。parent div {flex：1;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：green;}

< div class = 亲本 > < DIV> 1.0菜单< / div> < DIV> 2.0菜单< / div> < DIV> 3.0菜单< / div> < DIV> 4.0 Menu< / div>< / div>

The code below shows a <parent> container consisting of some <child> items.

The <child> items are positioned inside the <parent> item with the .flex property (see display: flex in the parent) so they exactly fill out the parent element. All this works fine so far.

However, I want to achieve now that the display: flex property only applies to the height of the <child> items so they exactly fit into the parent element vertically.

For the width I want each of the <child> items at 100% of the surrounding parent so in the end they are displayed as a block (below each other and not next to each other).

What do I have to change in my code to achieve this?

You can also find my code 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>

解决方案

Change to flex-direction: column and they will stack vertically, like block element does, and the flex: 1 will apply for their height.

Also, the justify-content should be set on the parent as it is a property of the flex container, though as you use flex: 1 on the flex-item, it won't affect anything.

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>

这篇关于柔性高度和宽度的Flexbox儿童：100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！