如何用Flexbox和JavaScript实现父元素内子元素的两行排列及展开显示？

如何利用Flexbox和JavaScript在一个父元素内实现子元素的两行排列，并支持点击展开显示全部内容？

本文将演示如何使用Flexbox和JavaScript，在一个父容器中将多个子元素排列成两行，初始状态隐藏超出部分，点击按钮后显示所有内容并启用水平滚动条。

关键在于巧妙地结合CSS的Flexbox布局和JavaScript的事件处理。我们使用一个外部容器（container）限制子元素的显示区域，内部使用Flexbox容器（flex-container）排列子元素。

首先，HTML结构如下：

立即学习“Java免费学习笔记（深入）”；

  
    
item1
    
item2
    
item3
    
item4
    
item5
    
item6
    
item7
    
item8
    
item9
    
item10
    
...
  

登录后复制

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宽度动态控制。

以上就是如何用Flexbox和JavaScript实现父元素内子元素的两行排列及展开显示？的详细内容，更多请关注【创想鸟】其它相关文章！