拉伸 CSS Flexbox 网格中的元素

Question

在答案/sf/answers/2217093441/中，图像拉伸以填充弹性盒网格中的“单元格”。

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

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;
}

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

我究竟做错了什么？

Answer 1

您的代码中几乎没有错误，因此它应该如下所示。

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

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