如何实现父元素中子元素的两行排列并自动换行？

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何实现父元素中子元素的两行排列并自动换行？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

如何让父元素中的子元素两行排列？

问题：

如何让父元素中的多个子元素并排排列，并在必要时自动换行？

回答：

可以通过使用 flexbox 布局来实现两行排列。flexbox 布局是一种 css 布局方法，允许子元素在父元素内自动对齐和分配空间。

示例代码：

html：

<div 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;
  overflow: hidden;
}

#flex-container {
  width: 800px;
  height: 200px;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#flex-container .item {
  width: 150px;
  text-align: center;
  background: yellow;
  height: 94px;
  display: flex-item;
}

#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").style.overflow = "scroll";
};

基本原理：

1. 创建一个父容器（带有 #container id）来包含子元素，并设置其溢出属性为 hidden。
2. 在父容器内创建另一个容器（带有 #flex-container id），并使用 flexbox 布局让其子元素并排排列。
3. 添加一个带有 ... 文本的按钮（带有 #more id）来指示隐藏的内容。
4. 设置 #more 按钮的 display 属性为 none，使其隐藏。
5. 当点击 #more 按钮时，将其隐藏并设置父容器的 overflow 属性为 scroll，允许出现水平滚动条。
6. 根据需要调整 #container 和 #flex-container 的宽度和高度，以适应你的需要。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。