javascript - 如何实现父元素内子元素的两行排列？

Question

现在我想实现这样一个效果，父元素是红色的框，然后里面有很多子元素，我想要这些子元素在父元素成两行排列，且初始的时候超出部分是隐藏的，然后在父元素的容器出出现一个省略号的按钮，点击这个省略号按钮，隐藏部分出现，出现横向滚动条

如上

Answer 1

在线演示

Html:

<div id="container" class="hidden">  <div id="flex-container">    <div class="item">item1</div>    <div class="item">item2</div>    <div class="item">item3</div>    <div class="item">item4</div>    <div class="item">item5</div>    <div class="item">item6</div>    <div class="item">item7</div>    <div class="item">item8</div>    <div class="item">item9</div>    <div class="item">item10</div>    <div id="more">...</div>  </div></div>

Css:

#container {  width: 400px;  height: 200px;  border: 1px solid red;  position: relative;}#container.hidden {  overflow-x: hidden;  overflow-y: hidden;}#container.scroll {  overflow-x: scroll;  overflow-y: hidden;}#flex-container {  width: 800px;  height: 200px;  background: pink;  display: flex;  flex-wrap: wrap;  justify-content: space-around;}#flex-container .item {  width: 150px;  text-align: center;  background: yellow;  height: 94px;  display: flex-item;}#more {  display: block;  position: absolute;  top: 160px;  right: 10px;  z-index: 5;  width: 80px;  height: 30px;  background: green;  border-radius: 5px;  text-align: center;  color: white;  cursor: pointer;}

Javascript:

document.getElementById("more").onclick = function() {  this.style.display = "none";  document.getElementById("container").className = "scroll";}

基本原理

1. 在一个外部视窗Div内（名为 container），放置一个“盛放” 这两排内容块的容器（名为flex-container）。 视窗Div设置为你想要的大小，超出部分设定为自动隐藏。
2. 浮动设定一个按钮-更多，点击后，将视窗div的超出部分行为改为 x轴方向 滚动即可。
3. 何时展示“更多”按钮可以使用脚本判断，可自行实现： 当flex-container的宽度超过视窗div的宽度时才显示。