小编tec*_*eek的帖子

CSS网格布局的水平滚动

我需要仪表板具有不同的布局。如果项目超出以适合可见视口，则只需要水平滚动用于layout-container。我遇到了具有以下要求的布局。

我已经使用CSS-flexbox创建了布局样式，但是无法获取水平滚动，只能获取垂直滚动。

html,
body {
  height: 100%;
  margin: 0px;
}
* {
  box-sizing: border-box;
}
.flexbox {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  background-color: lightgreen;
}
.item {
  min-width: 50%;
  min-height: 50%;
  flex: 1 0 0;
  border: 1px solid;
}
.item:nth-child(odd) {
  background-color: lightblue;
}

.item:nth-child(even) {
  background-color: lightslategray;
}
.item1 {
  min-width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<div class="flexbox">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item1">4</div>
  <div class="item item2">5</div>
  <div class="item item3">6</div>
</div> …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox css-grid

tec*_*eek

2018 04-26

3
推荐指数

1
解决办法

6181
查看次数