CSS flex 方向列和列跨度答案

【问题标题】：CSS flex direction column and column spanCSS flex 方向列和列跨度
【发布时间】：2019-11-10 01:53:03
【问题描述】：

我正在尝试使用flex-direction: column 实现以下目标：

.page
---------------------
| H1                |
|---------|---------|
|  DIV 1  |  DIV 3  |
|         |---------|
|---------|  DIV 4  |
|  DIV 2  |         |
|         |         |
---------------------

需要注意的是，我希望标记保持不变，所以现在看起来像这样：

<div class="page">
  <h1>Test</h1>
  <div>test</div>
  <div>test</div>
  <!-- ... -->
</div>

这是我尝试过的，但 h1 并没有真正跨越，而是占据了整个列：

.page {
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  font-size: 12pt;
  background: #FFF;

  margin: 5mm;
  padding: 12mm;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.page > * {
}

h1 {
  width: 100%;
}

【问题讨论】：

在此使用 grid 而不是 flex。此外，我看到您正在页面中设置 A4 打印尺寸，因此这可能是一个打印模板（例如发票）。更好地将其转换为像素，您会发现有几个页面在线将mm 转换为px 基于dpi。

标签： html css flexbox

【解决方案1】：

您可以使用 CSS grid，查看示例 sn-p。

.page {
  width: 100% /*2480px = 210mm @ 300dpi*/;
  height: 100% /*3508px = 297mm @ 300dpi*/;
  position: absolute;
  box-sizing: border-box;
  font-size: .875rem;
  background: #FFF;
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 48.5%);
  grid-template-rows:  15% 20% 20% 20% 20%;
  align-items: center;
  align-content: center;
  grid-column-gap: 1%;
  grid-row-gap: 1%;
  align-self: stretch;
}
h1 {
 font-size: 1rem;
 grid-area: 1 / 1 / 2 / 3;
 background-color: #ccc;
 width:100%;
 height: 100%;
 text-align: center;
 display: table;
}
div {
  display: table;
  align-self: center;
  height: 100%;
  width: 100%;
  text-align: center;
  display: table
}

div span, h1 span {
  display: table-cell;
  vertical-align: middle;
}
.div1 {
  grid-area: 2 / 1 / 4 / 2;
  background-color: #cfcfcf;
}
.div2 {
  grid-area: 4 / 1 / 6 / 2;
  background-color: #eee;
}
.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: #d3d3d3;
}
.div4 {
  grid-area: 3 / 2 / 6 / 3;
  background-color: #a3a3a3;
}

<div class="page">
  <h1><span>H1</span></h1>
  <div class="div1"><span>DIV 1</span></div>
  <div class="div2"><span>DIV 2</span></div>
  <div class="div3"><span>DIV 3</span></div>
  <div class="div4"><span>DIV 4</span></div>
</div>

【讨论】：

此解决方案仅在您知道页面将拥有的行数时才有效。此外，它假设所有divs 共享相同的高度比。 IE。 p 要么溢出，要么在下一个元素之前有剩余的空格。您还必须分配grid-area，这不会使其成为动态解决方案。
@Johannes yes grid 不是动态的，这意味着您必须预先计算每个元素的主题并相应地分配您的网格区域。但正如您在问题的CSS 中看到的那样，宽度和高度设置为 A4，所以我的回答是以某种方式假设的。例如，发票通常为 A4 尺寸并具有静态区域，因此使用 grid 非常适合这种情况。

【解决方案2】：

试试这个

HTML

<div class="page">
  <div class="row">
      <div>DIV 1 </div>
  </div>
  <div class="row splitRow">
    <div class="row">
      <div>DIV 2 </div>
      <div>DIV 3 </div>
    </div>
    <div class="row">
      <div>DIV 4 </div>
      <div>DIV 5 </div>  
    </div>
  </div>

CSS

.row{
  display:flex;
}
.splitRow{
  flex-direction: column;
  align-items: center;
}
div{
  border:1px solid red;
  width: 200px;
  text-align: center;
}

输出

【讨论】：

“重要的是要注意，我希望标记保持不变...”
我尝试了一些组合，display: flex 在不更改标记的情况下似乎无法在这个用例中工作。更改它是可行的，但column-count 似乎是一个更简单的解决方案，不需要更改标记。