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

要实现父元素内子元素的两行排列及展开显示，可以使用Flexbox布局来控制子元素的排列方式，并结合JavaScript来实现展开和折叠的功能。以下是一个简单的实现方案：

HTML 结构

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>
<button id="toggleButton">展开/折叠</button>

CSS 样式

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 设置子元素之间的间距 */
  max-height: 100px; /* 初始高度，显示两行 */
  overflow: hidden; /* 隐藏超出部分 */
  transition: max-height 0.3s ease; /* 添加过渡效果 */
}

.item {
  flex: 1 1 calc(50% - 10px); /* 每行显示两个子元素，减去间距 */
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.container.expanded {
  max-height: 1000px; /* 展开后的高度，根据需要调整 */
}

JavaScript 代码

document.getElementById('toggleButton').addEventListener('click', function() {
  const container = document.querySelector('.container');
  container.classList.toggle('expanded');
});

解释

1. HTML 结构：container 是父元素，包含多个 item 子元素。toggleButton 是用于切换展开和折叠状态的按钮。

2. CSS 样式：

   • display: flex; 和 flex-wrap: wrap; 使子元素在父元素内按行排列，并在空间不足时换行。
   • gap: 10px; 设置子元素之间的间距。
   • max-height: 100px; 和 overflow: hidden; 限制父元素的高度，使其只显示两行子元素。
   • .container.expanded 类用于展开父元素，使其显示所有子元素。

3. JavaScript 代码：

   • 通过 addEventListener 监听按钮的点击事件。
   • 点击按钮时，切换 container 元素的 expanded 类，从而控制父元素的高度，实现展开和折叠的效果。

总结

通过Flexbox布局和简单的JavaScript代码，你可以轻松实现父元素内子元素的两行排列及展开显示功能。这种方法灵活且易于维护，适用于各种需要动态控制内容显示的场景。