Question

我正在尝试占用整个视口的网格，其中每个单元格具有完全相同的尺寸，并且同样使用整个视口宽度和高度。

因为我需要显示 x * y 表/网格，其中 x 和 y 可以上升到20，我想避免使用分割百分比（100/2 = 50％，100/3 = 33.33％，25％，20％，16.67％，14.29％，12.5％等）的宽度和高度。

（小）约束：使用不支持CSS3 Flexbox的Opera 12.00。

我真的不需要行/列概念：它可以是多个<div> 浮动在行...

在Flexbox中，我的目标是：

HTML：

<div id="matrix-container">
    <div class="matrix-row">
        <div class="matrix-cell"><div class="matrix-cell-content">1x1</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">1x2</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">1x3</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">1x4</div></div>
    </div>
    <div class="matrix-row">
        <div class="matrix-cell"><div class="matrix-cell-content">2x1</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">2x2</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">2x3</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">2x4</div></div>
    </div>
    <div class="matrix-row">
        <div class="matrix-cell"><div class="matrix-cell-content">3x1</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">3x2</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">3x3</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">3x4</div></div>
    </div>
</div>

CSS：

body {
    margin: 0;
}
#matrix-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.matrix-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
}

.matrix-cell {
    flex: 1;
    display: flex;
    border: 1px solid grey;
}
.matrix-cell-content {
    flex: 1 1 0;
}

演示：https://jsfiddle.net/Ly38bsrr/

没有Flexbox可以完成吗？或者我可以通过JavaScript使用Flexbox支持吗？

Answer 1

您可以使用CSS表格：

#matrix-container {
  display: table; /* Table layout */
  height: 100%;   /* Fill all the window vertically */
  width: 100%;    /* Fill all the window horizontally */
}
.matrix-row {
  display: table-row; /* Row */    
}
.matrix-cell {
  display: table-cell; /* Cell */
}

现在我们将强制所有列具有相同的宽度。为此，我们将使用fixed算法，该算法定义明确且通常比auto算法快。根据该算法，

“width”属性[...]
的列元素，其值不是“auto”
否则，第一行中的单元格为'width'属性的值为'auto'[...]

任何剩余的列均等剩余的水平表空间（减去边框或单元格间距）。

因此，不要对列和单元格施加任何宽度，我们就完成了。

现在让我们看看heights：

在CSS 2.1中，单元格框的高度是所需的最小高度内容。

因此，如果单元格具有不同高度的内容，则行也可能具有不同的高度！

但是由于你在单元格内部有包装器，我们可以强制它们没有高度（让内容溢出）。因此，所有单元格的初始高度均为0。

.matrix-cell-content {
  height: 0;
}

只有一个问题：

CSS 2.1 未定义如何分配额外空间 'height'属性会使表格高于其他值会的。

但是大多数实现都是平均分配它。没问题。

html, body {
  margin: 0;
  height: 100%;
}
#matrix-container {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.matrix-row {
  display: table-row;
}
.matrix-cell {
  display: table-cell;
  border: 1px solid grey;
}
.matrix-cell-content {
  height: 0;
}

<div id="matrix-container">
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">1x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">1x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">1x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">1x4</div></div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">2x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">2x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">2x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">2x4</div></div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">3x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">3x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">3x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">3x4</div></div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">4x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">4x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">4x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">4x4</div></div>
  </div>
</div>

如何在没有Flexbox支持的情况下分割视口（整个宽度和高度）的x * y网格

1 个答案: