如何用Flexbox和JavaScript实现父元素内子元素的两行排列及展开显示？-js教程-PHP中文网

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

霞舞

发布： 2025-03-05 11:34:31

原创

1164人浏览过

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

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

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

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

首先，HTML结构如下：

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

SEEK.ai

AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

128

查看详情

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

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