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

Question

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

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

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

Answer 1

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

兼容性:IE 11 +和所有现代浏览器.Safari支持-webkit-前缀.

这个节目的明星是:

• 在display: flex和flex-wrap: wrap属性的容器."wrap"值允许容器的内容根据需要分解到新行.

• 该flex速记属性:

  [flex属性的初始值是]其longhand属性的初始值的串联:

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

  这是关于CSS技巧的Flexbox的简单指南

在我们的例子中我们使用:

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