使用 CSS（Flex 或 CSS Grid）在水平和垂直布局之间切换答案

【问题标题】：Switch between horizontal and vertical layout using CSS (Flex or CSS Grid)使用 CSS（Flex 或 CSS Grid）在水平和垂直布局之间切换
【发布时间】：2019-07-15 04:46:37
【问题描述】：

我有一个默认情况下看起来如下的表格（最多 20 个类别，每个类别最多 30 个项目；每个项目将由一张卡片表示）：

现在我想让用户选择切换到水平布局，应该如下所示。

我从 JSFiddle 开始：https://jsfiddle.net/stefanwalther/1uzh836j/15/

.status-container {

}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  padding: 3px;
}

.header {
  background-color: #ccc;
}

<div>
  <div class="row header">
    <div class="col">
      Category 1
    </div>
    <div class="col">
      Category 2
    </div>
    <div class="col">
      Category 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      Item 1.1
    </div>
    <div class="col">
      Item 2.1
    </div>
    <div class="col">
      Item 3.1
    </div>
  </div>
  <div class="row">
    <div class="col">
      Item 1.2
    </div>
    <div class="col">
      Item 2.2
    </div>
    <div class="col">
      Item 3.2
    </div>
  </div>
</div>

不幸的是，我被卡住了，不知道选择哪种方法（CSS-Grid，Flex-Box，？）。

【问题讨论】：

CSS-Grid 是最佳解决方案，因为它使跨行变得更加简单，但我怀疑它是否可以在不包装 div 的情况下进行管理。问题是跨越所需的未确定行数...如果您不知道每个类别有多少行，则无法设置跨度数。
@Paulie_D 我没有让它与 CSS-Grid 一起使用 - 我认为 flex 在这里效果更好，如下面的公认答案所示。但是谢谢你的评论。

标签： html css flexbox css-grid

【解决方案1】：

纯 CSS flex 解决方案就在这里。每个类别支持任意数量的项目。

参见下面的 sn-p：

* {
  box-sizing: border-box;
  font: normal 400 100%/1.25 sans-serif;
}

#switch {
  display: none
}

label {
  display: inline-block;
  margin: 1rem;
  padding: .25em .5em;
  border: solid 1px;
  border-radius: 1em;
}

label:after {
  content: 'vertical mode';
}

#switch:checked+label:after {
  content: 'horizontal mode';
}

.category {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-left: 25%
}

.category > div {
  width: 25%;
  padding: .5em;
  border: solid 2px rgba(0, 0, 0, 0);
  border-width: 0 4px 4px 0;
  box-shadow: inset 0 0 0 2px #248;
  text-align: center;
}

.category .header {
  position: absolute;
  left: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #27c padding-box;
  box-shadow: none;
}

#switch:checked ~ section {
  display: flex;
  justify-content: stretch;
  align-items: flex-start;
  width: 100%;
}

#switch:checked ~ section .category {
  flex-flow: column nowrap;
  width: 25%;
  padding: 0;
}

#switch:checked ~ section .category > div {
  width: 100%
}

#switch:checked~section .category .header {
  position: static;
  height: auto;
}

<input type="checkbox" id="switch"><label for="switch">Switch to </label>

<section>
  <div class="category">
    <div class="header">Category 1</div>
    <div>Item 1.1</div>
    <div>Item 1.2</div>
    <div>Item 1.3</div>
    <div>Item 1.4</div>
    <div>Item 1.5</div>
    <div>Item 1.6</div>
    <div>Item 1.7</div>
    <div>Item 1.8</div>
  </div>
  <div class="category">
    <div class="header">Category 2</div>
    <div>Item 2.1</div>
    <div>Item 2.2</div>
    <div>Item 2.3</div>
  </div>
  <div class="category">
    <div class="header">Category 3</div>
    <div>Item 3.1</div>
    <div>Item 3.2</div>
    <div>Item 3.3</div>
    <div>Item 3.4</div>
    <div>Item 3.5</div>
    <div>Item 3.6</div>
    <div>Item 3.7</div>
    <div>Item 3.8</div>
    <div>Item 3.9</div>
    <div>Item 3.10</div>
    <div>Item 3.11</div>
    <div>Item 3.12</div>
    <div>Item 3.13</div>
    <div>Item 3.14</div>
  </div>
  <div class="category">
    <div class="header">Category 4</div>
    <div>Item 4.1</div>
    <div>Item 4.2</div>
    <div>Item 4.3</div>
    <div>Item 4.4</div>
  </div>
</section>

【讨论】：