如何将所有子 div 包含到父 div 中？

Posted 2023-03-05

【中文标题】如何将所有子 div 包含到父 div 中？

【英文标题】：How can i include all child divs into a parent div?

【发布时间】：2015-10-03 21:28:59

【问题描述】：

为什么我的父 div 不包装内容或子 div？

我需要 flex-container div 中的所有 flex-item（子元素）。

这是我的CodePen。

body 
    background:#ddd;

.flex-containerHome 
    height:600px;
    display:table;
    white-space:nowrap;

.flex-cotainerHead 
    display:inline-block;
    margin:0 auto;

.flex-container 
    padding: 10px;
    display: flex;
    flex-flow: column wrap;
    border:1px solid #fff;
    height:600px;

.flex-item:hover 
    background-color: #191975;

.flex-item 
    transition:background .5s;
    background: tomato;
    width: 150px;
    height: 150px;
    margin: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    border-radius:15px;

<div class="flex-containerHome">
    <div class="flex-cotainerHead">
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
            <div class="flex-item">5</div>
            <div class="flex-item">6</div>
            <div class="flex-item">7</div>
            <div class="flex-item">8</div>
        </div>
    </div>
     <div class="flex-cotainerHead">
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
            <div class="flex-item">5</div>
            <div class="flex-item">6</div>
            <div class="flex-item">7</div>
            <div class="flex-item">8</div>
        </div>
    </div>
</div>

【问题讨论】：

我不会垂直弯曲所有项目。相反，我想用 CSS 动态调整宽度。（我的意思是如果我将宽度固定为 600px。然后如果我添加更多的子元素，子元素将再次从父元素中出来。所以我只想包装所有Div 中的子元素）

【参考方案1】：

我试了一下，这里是my fork。

我修改了.flex-containerHome 使其也具有弹性。我还在.flex-container 元素中添加了flex: 1 0 auto。我还删除了.flex-cotainerHead 元素

修改后的 HTML

<div class="flex-containerHome">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
  </div>
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
  </div>
</div>

修改后的 CSS

.flex-containerHome 
  height: 600px;
  display: flex;

.flex-container 
  padding: 10px;
  display: flex;
  flex-flow: column wrap;
  flex: 1 0 auto;
  border: 1px solid #fff;
  height: 600px;

【讨论】：

完美！！。谢谢@kiiroSora

但是，如果我添加更多父元素，您的代码就会中断。这是叉子link。我希望所有父 div 并排显示。为了解决这个问题，我为我发布的代码添加了 display:table 和 display:inline-block @KiiroSora09

@user4709780 我更新了代码笔中的实现，我添加了 flex-flow: row wrap;对于父级并删除了子级的 flex 属性的 auto ，还添加了 max-width 和 min-width 以便如果有超过 2 个父级可用，则子级将换行。但这取决于您希望它的行为方式。

感谢更新，但我希望水平并排显示所有父元素。如果有溢出，它应该被隐藏，我需要在底部有一个滚动条来水平滑动它。为了适应该功能，我添加了display:table 和display:inline-block。 （简单的例子是windows 8主屏幕，所有组水平并排显示，用户可以滑动组）@KiiroSora09

也许你可以改变 flex-flow: row wrap;到 flex-flow: row nowrap;在我的示例中，这将强制列并排，并出现水平滚动条，这是 CodePen 中的示例：codepen.io/anon/pen/waXYgy

【参考方案2】：

只需在 flex 容器类中添加 overflow:hidden 并将 flex 流更改为 row wrap 即可。

.flex-container 
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 auto;
  border: 1px solid #fff;
  height: 600px;
  overflow: hidden;