如何巧妙地在父元素中实现子元素的两行排列？
想要在父元素中将子元素排列成两行，并且初始时隐藏超出部分，在出现省略号按钮点击后展开显示，使用 css、html 和 javascript 即可实现。
html 结构
首先，创建一个外部视窗 div（container），其中包含一个“盛放” 两行内容块的容器（flex-container）。设置 container 的尺寸，并将其超出部分隐藏。
立即学习“Java免费学习笔记（深入）”；
css 样式
添加 css 样式，设置 flex-container 的宽度和高度，并使其以 flex 方式排列。设置子元素（称为 item）的大小和背景颜色。
javascript 交互
接下来，使用 javascript 监听“更多”按钮的点击事件。当点击时，隐藏“更多”按钮，并为 container 添加一个“scroll”类，这会将 container 设置为可水平滚动。
完整代码
下面是完整的 html、css 和 javascript 代码：
html
item1item2...
css
#container {
width: 400px;
height: 200px;
border: 1px solid red;
position: relative;
}
#flex-container {
width: 800px;
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#flex-container .item {
width: 150px;
text-align: center;
height: 94px;
display: flex-item;
}
#more {
display: block;
position: absolute;
right: 10px;
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";
}通过这种方法，你可以在父元素中轻松实现子元素的两行排列，并使超出部分在初始状态下隐藏。点击省略号按钮即可在出现横向滚动条的同时显示出隐藏部分。
