如何更改CSS flex-box列的宽度？

Question

我有一个菜单 div，它填充了其容器高度的100％，在它旁边的右侧是header，body和footer部分。

我设法做到了CSS flex property。但是，我想更改"menu"div从容器中取出的宽度量，例如，使其成为10% width of container's width，并使其rest divs fill what's left（即使"menu"div在以后被隐藏）。

我现在拥有的JS Fiddle：https：//jsfiddle.net/jf29vr0x/3/

.container {
  display: flex;
  flex-flow: column wrap;
  width: 75%;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

.menu {
  flex: 0 0 100%;
  background: lightblue;
}

.header {
  flex: 0 0 10%;
  background: lightgray;
}

.body {
  flex: 0 0 80%;
  background: purple;
}

.footer {
  flex: 0 0 10%;
  background: lightgreen;
}

<div class="container">

  <div class="menu">
    Menu
  </div>

  <div class="header">
    Header
  </div>

  <div class="body">
    Body
  </div>

  <div class="footer">
    Footer
  </div>

</div>

我发现，如果我在“ menu”类上显式设置宽度，它将调整其大小，但是其余方框不会填充剩余的空间，除非我也将其宽度明确声明为100％。但是，这样做会使容器溢出，并且由于容器与中心对齐，因此它看起来很像。

我还可以将宽度设置为菜单上的90％（在页眉，页脚主体上）和10％，但是有时菜单设置为display: none;，所以当它消失时，其他布局部分将仅占容器宽度的90％ 。

有什么办法只能使用flex-box属性来做到这一点？我不太了解flex-shrink和flex-grow的含义，但是我认为它们仅会影响高度（在这种情况下）？

谢谢。

Answer 1

您必须在右列周围添加包装器，然后仅flex-basis在.menu元素上指定。

.container {
  display: flex;
  width: 75%;
  height: 500px;
  position: relative;
  margin: 0 auto;
  height: 500px;
  overflow: hidden;
}

.right-col {
  flex-flow: column wrap;
  flex-grow: 1;
  height: 100%;
  display: flex;
}

.menu {
  flex-basis: 10%;
  background: lightblue;
}

.header {
  flex: 0 0 10%;
  background: lightgray;
}

.body {
  flex: 0 0 80%;
  background: purple;
}

.footer {
  flex: 0 0 10%;
  background: lightgreen;
}

<div class="container">
  <div class="menu">Menu</div>
  <div class="right-col">
    <div class="header">Header</div>
    <div class="body">Body</div>
    <div class="footer">Footer</div>
  </div>
</div>

小提琴：https : //jsfiddle.net/jf29vr0x/11/

现在，当菜单隐藏时，右列将展开全部金额。