Question

我并排有3个“窗格”或列。我希望中间的.mid-pane占据大部分空间。但是更改任何宽度值似乎无济于事。我说width: 10px;，什么都没有发生。这是怎么回事？ https://jsfiddle.net/agtfwmhq/1/

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.maindiv {
  height: 100%;
  padding: 0;
}

.container {
  display: flex;
}

.container>div {
  flex: 1;
  /*grow*/
}

.left-pane {
  width: 100px;
  height: 100%;
  background-color: #5897fb;
}

.mid-pane {
  width: 80%;
  height: 100%;
  margin: 0;
  padding: 10px;
}

.right-pane {
  width: 100px;
  height: 100%;
  background-color: #ffefef;
}

<div class="maindiv container">
  <div class="left-pane">
  </div>

  <div class="mid-pane">
  </div>

  <div class="right-pane">
  </div>
</div>

Answer 1

您可以在CSS下对其进行更改以使其起作用。赋予Flexgrow属性将发挥神奇作用

.

/** comment this
  * container > div {
  * flex: 1; /*grow*/
  * } */

.left-pane {
    flex: 1;
    height: 100%;
    background-color: #5897fb;
}
.mid-pane {
    flex: 2;
    height: 100%;
    margin: 0;
    padding: 10px;
}
.right-pane {
    flex: 1;
    height: 100%;
    background-color: #ffefef;
}

更改宽度值不会更改宽度吗？

1 个答案: