代码之家  ›  专栏  ›  技术社区  ›  Mr_Green

通过处理子容器的动态添加,使用Flexbox以相同的空间垂直拉伸多个子容器

flexbox css html
  •  1
  • Mr_Green  · 技术社区  · 7 年前

    我有一个父容器 display: flex 和 flex-direction: row . 儿童容器水平伸展良好。问题是子容器可以动态增加,并且它们都需要完美地包含在父容器中,如下图所示:

    enter image description here

    第二种情况

    enter image description here

    在上面的两张图片中,我通过手动将所有子容器的高度设置为 50% 33.33% 分别( 当子容器动态增加时 ). 而不是这样做,我希望flexbox来处理它,并希望这是可能的。

    Codepen ( 移除最后三个子容器并设置 .child 50% 检查第一个病例 )

    1 回复  |  直到 7 年前
        1
  •  0
  •   Temani Afif    7 年前

    检查下面的例子,我把第一个和第二个案例: 

    .parent {
  display: flex;
  background-color: yellow;
  height: 400px;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 20px;
}

.child{
 /* height: 33.33%;*/
}

.one{
  background-color: red;
  width: 33.33%;
}

.two{
  background-color: green;
  width: 33.33%;
}

.three{
  background-color: blue;
  width: 33.33%;
}

.four{
  background-color: cornflowerblue;
  width: 50%;
  position:relative;
}

.five{
  background-color: orange;
  width: 50%;
}

.four-wrapper{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  overflow: auto;
  display: flex;
  max-height: 100%;
}
    <div class="parent">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
  <div class="child four">
    <div class="four-wrapper">
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      
    </div>
  </div>
  <div class="child five"></div>

<div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>

<div class="parent">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
  <div class="child four">
    <div class="four-wrapper">
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      
    </div>
  </div>
  <div class="child five"></div>

</div>

    要使其通用,可以使流中的所有内容都包含在所有元素中: 

    .parent {
  display: flex;
  background-color: yellow;
  height: 400px;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 20px;
}

.child{
 /* height: 33.33%;*/
 position:relative;
}
.child>* {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:auto;
}

.one{
  background-color: red;
  width: 33.33%;
}

.two{
  background-color: green;
  width: 33.33%;
}

.three{
  background-color: blue;
  width: 33.33%;
}

.four{
  background-color: cornflowerblue;
  width: 50%;
}

.five{
  background-color: orange;
  width: 50%;
}

.four-wrapper{
  display: flex;
  max-height: 100%;
}
    <div class="parent">
  <div class="child one">
  </div>
  <div class="child two">
    <div>
         a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
    </div>
  </div>
  <div class="child three">
  <div>
      b<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb
  </div>
  </div>
  <div class="child four">
    <div class="four-wrapper">
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      
    </div>
  </div>
  <div class="child five"></div>

<div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号