Flexbox+JS实现两行子元素排列及展开：超详细教程

本文介绍如何使用Flexbox和JavaScript实现父元素内子元素的两行排列及展开显示功能。通过巧妙运用Flexbox的`flex-wrap: wrap`属性实现子元素自动换行，并结合`overflow: hidden`初始隐藏超出部分，再利用JavaScript控制点击事件，动态切换`overflow-x: auto`属性，从而实现点击按钮展开显示所有内容并启用水平滚动条的效果。 文中详细讲解了HTML结构、CSS样式以及JavaScript代码，并对核心原理进行了阐述，帮助开发者快速掌握该技巧，适用于需要展示大量内容且需控制显示区域的场景。

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

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

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

首先，HTML结构如下：

<div class="hidden" id="container">
  <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: 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宽度动态控制。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~