带有 flex 的两行多列水平滚动网格答案

【问题标题】：Two row multi column horizontal scroll grid with flex带有 flex 的两行多列水平滚动网格
【发布时间】：2019-12-05 01:31:25
【问题描述】：

我可以在遍历项目以在每个奇数或偶数项目之前和之后添加一个 div 时执行此操作，但我想知道是否有办法使用 JUST CSS flex 来完成此操作。

我想摆脱 .col div 并只使用 CSS。

我需要显示一行水平滚动的项目或水平滚动项目的两行。

一排用于移动屏幕，两排用于任何大于移动设备的屏幕。

这是一支笔

https://codepen.io/modemlooper/pen/rXWaVK

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let html = "";

const device = "tablet";

items.map((item, index) => {
  html +=
    "tablet" === device && index % 2 === 0 ? '<div class="col">' : "";

  html += '<div class="slide"><div>' + item + "</div></div>";

  html += "tablet" === device && index % 2 !== 0 ? "</div>" : "";
});

var e = document.createElement("div");
e.className += " box";
e.innerHTML = html;
document.querySelector(".wrap").appendChild(e);

.wrap {
  display: flex;
  height: 100%;
  align-items: center;
}

.box {
  display: flex;
  background-color: #2c3e50;
  min-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.box::-webkit-scrollbar {
  display: none;
}

.slide {
  box-sizing: border-box;
  padding: 20px;
}

.slide>div {
  min-width: 218px;
  height: 178px;
  display: flex;
  box-sizing: border-box;
}

.slide:nth-child(odd)>div {
  background: red;
}

.slide:nth-child(even)>div {
  background: blue;
}

.col:nth-child(odd) .slide:nth-child(odd)>div {
  background: red;
}

.col:nth-child(even) .slide:nth-child(even)>div {
  background: red;
}

.col:nth-child(even) .slide:nth-child(odd)>div {
  background: blue;
}

.col:nth-child(odd) .slide:nth-child(even)>div {
  background: blue;
}

&lt;div class="wrap"&gt;&lt;/div&gt;

【问题讨论】：

块的height 是静态的吗？
是的，它们有固定的宽度和高度。

标签： css flexbox

【解决方案1】：

应该满足您的需求。仅使用CSS。

.wrap {
  display: flex;
}

.box {
  box-sizing: border-box;
  width: 220px;
  height: 160px;
  margin: 20px;
  background-color: #2c3e50;
  flex-shrink: 0;
}

/* DESKTOP */
@media  (min-width: 1024px) {
  .wrap {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 400px;
  }
}

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：