在CSS flexbox网格中拉伸元素

Question

在答案https://stackoverflow.com/a/31672763/96233中，图像会延伸以填充＆＃34;细胞＆＃34;在弹性箱网格中。

当我用按钮尝试时，它们没有。

＆＃13;

＆＃13;

postToExternal: function(args, url) {
        var deferred =  this.doXhr(args,url);
        return deferred;        
    }

＆＃13;

grid-row {
  display: flex;
  width: 100%;
}

.narrow {
  flex-grow: 1;
}

.wide {
  flex-grow: 2;
}

.grid {
  width: 300px;
  height: 300px;
}

.grid button {
  width: 100%;
  height: auto;
  vertical-align: middle;
  flex-shrink: 1;
  padding: 1px;
}

＆＃13;

＆＃13;

＆＃13;

我做错了什么？

Answer 1

你的代码中几乎没有错误，所以看起来应该是这样的。

＆＃13;

＆＃13;

.grid {
  width: 300px;
  height: 300px;
}
.grid-row {
  display: flex;
}
.narrow {
  flex: 1;
}
.wide {
  flex: 2;
}

＆＃13;

<div class="grid">
  <div class="grid-row">
    <button class="wide">1</button>
    <button class="narrow">2</button>
    <button class="narrow">3</button>
  </div>
  <div class="grid-row">
    <button class="narrow">4</button>
    <button class="wide">5</button>
    <button class="narrow">6</button>
  </div>
  <div class="grid-row">
    <button class="narrow">7</button>
    <button class="narrow">8</button>
    <button class="wide">9</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;