html - 使用 CSS(Flex 或 CSS Grid)在水平和垂直布局之间切换

Question

我有一个默认情况下如下所示的表格(最多 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、？)。

Answer 1

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

请看下面的片段:

* {
  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>