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属性。 “wrap”值允许容器的内容根据需要分解到新行。
flex shorthand属性：
[flex属性的初始值]是其longhand的初始值的串联   属性：
- 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
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>

Answer 2

使用宽度：calc(100% - 50px)表示B1和B2的宽度

<强> FIDDLE

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 40%;
  height: 100px;
  max-height: 100px;
  border: 1px solid green;
}
.container div:nth-child(-n + 2) {
  background: yellow;
  width: 50px;
  height: 50px;
}
.container div:nth-child(n + 3) {
  background: aqua;
  height: 50px;
  width: calc(100% - 50px);
}

＆＃13;

<div class="container">
  <div>A1</div>
  <div>A2</div>
  <div>B1 - Where B1&B2 fill the remaining space</div>
  <div>B2 - Where B1&B2 fill the remaining space</div>
</div>

＆＃13;

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

2 个答案:

简单的2X2 Flexbox网格 - 固定且流畅

完整示例