如何利用Flexbox和JavaScript在一个父元素内实现子元素的两行排列，并支持点击展开显示全部内容？
本文将演示如何使用Flexbox和JavaScript，在一个父容器中将多个子元素排列成两行，初始状态隐藏超出部分，点击按钮后显示所有内容并启用水平滚动条。
关键在于巧妙地结合CSS的Flexbox布局和JavaScript的事件处理。我们使用一个外部容器（container）限制子元素的显示区域，内部使用Flexbox容器（flex-container）排列子元素。
首先，HTML结构如下：
立即学习“Java免费学习笔记（深入）”；
item1item2item3item4item5item6item7item8item9item10...
CSS样式定义父元素大小、边框以及子元素的排列方式：
#container {
width: 400px;
height: 200px;
border: 1px solid red;
position: relative;
}
#container.hidden {
overflow: hidden; /* 简化overflow属性 */
}
#container.scroll {
overflow-x: auto; /* 使用auto，浏览器自动判断是否需要滚动条 */
overflow-y: hidden;
}
#flex-container {
width: 800px; /* 内容实际宽度 */
height: 200px;
background: pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
width: 150px;
text-align: center;
background: yellow;
height: 94px;
}
#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";
};
核心原理：flex-wrap: wrap; 使子元素自动换行；overflow: hidden 初始隐藏超出部分；点击按钮后，overflow-x: auto; 自动启用水平滚动条显示全部内容。“更多”按钮的显示/隐藏逻辑在此简化，实际应用中可根据flex-container宽度是否超过container宽度动态控制。
