如何更改 CSS 弹性框列的宽度？

Question

我有一个 menu div 填充了容器高度的 100%，在它旁边，在右边, 是 header, body 和页脚部分。

我设法用 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" class 上明确设置宽度，它会调整它的大小，但其余的框不会填满 space 左边，除非我还明确声明它们的宽度为 100%。但是，这样做会使容器溢出，并且由于容器与中心对齐，所以看起来不合适。

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

有什么方法可以只使用 flex-box 属性吗？我不太了解 flex-shrink 和 flex-grow 是什么，但我认为它们只影响（在这种情况下）高度？

谢谢。

Answer 1

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

.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>

Fiddle: https://jsfiddle.net/jf29vr0x/11/

现在当菜单隐藏时，右栏会全量展开。

如何更改 CSS 弹性框列的宽度？

How to change the width of a CSS flex-box column?

html

css

flexbox