在 CSS flexbox 网格中拉伸元素答案

【问题标题】：Stretching elements in a CSS flexbox grid在 CSS flexbox 网格中拉伸元素
【发布时间】：2017-05-21 07:29:36
【问题描述】：

在答案 https://stackoverflow.com/a/31672763/96233 中，图像会拉伸以填充 flexbox 网格中的“单元格”。

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

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>

我做错了什么？

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：

谢谢！昨天我和这个打了几个小时。