html - 具有固定宽度列的 Flexbox 中的 2x2 网格

Question

是否可以使用 Flexbox 创建此网格:

----------
A1 | B1
----------
A2 | B2
----------

A1&A2 的宽度固定 (50px)，B1&B2 填充剩余空间。我不想为列创建包装器，因为我想在移动设备上重新排序单元格。

Answer 1

简单的 2X2 Flexbox 网格——固定和流动

兼容性:IE 11 + and all modern browsers. Safari 受 -webkit- 前缀支持。

这个节目的明星是:

• 容器的 display: flex 和 flex-wrap: wrap 属性。 “换行”值允许容器的内容根据需要换行。

• flex shorthand属性:

  [The initial value of the flex property is] the concatenation of the initial values of its longhand properties:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

  This is an easy guide to Flexbox over on CSS Tricks

在我们的示例中，我们使用:

• display: flex 和 flex-wrap: wrap 在容器 div 上

• flex: 1 1 calc(100% - 50px) 用于两个可调整大小的 div。这告诉 div 的默认宽度为 100% 减去固定单元格的 50px。从技术上讲，它可以增长和缩小，但由于它被设置为百分比，因此无论如何都会调整大小。

• flex: 0 0 50px 用于固定单元格。这会告知 div 的默认宽度为 50px，然后不会增大或缩小。

完整示例

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}
.grid-item {
  flex: 1 1 calc(100% - 50px);
  background: #F90;
  border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
  background: #F00;
  flex: 0 0 50px;
}

<div class="flex-grid">
  <div class="grid-item">
    A1
  </div>
  <div class="grid-item">
    B1
  </div>
  <div class="grid-item">
    A2
  </div>
  <div class="grid-item">
    B2
  </div>
</div>