CSS布局实现

Question

超出的部分用横向滚动条，怎么实现呢？

Answer 1

这个很简单啊，flex 基础应用，（以下代码只包含关键属性）：

.container {
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px; /* 限制高度 */
}

.item {
  height: 100px;
}

Answer 2

直接 grid 布局，代码与预览：
https://jsbin.com/wamavivosu/...

或者 flex 布局，但需要设置固定高度，还需要外面再包一层做滚动，代码与预览：
https://jsbin.com/paxikazulo/...

这里贴一下 grid 布局代码，其中 gap 属性兼容性较差，考虑兼容可换成内外边距实现间隔

html

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

css

.container {
  display: grid;
  grid: repeat(2, 100px) / auto-flow 100px;
  gap: 10px;
  padding: 10px;
  width: 420px;
  overflow: auto;
  counter-reset: i;
}

.container>* {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container,
.container>* {
  background: rgba(0, 0, 0, 0.2);
}

.container>::before {
  counter-increment: i;
  content: counter(i);
}