Question

我一直在努力解决一个我认为将有一个非常简单的解决方案的问题，但是我现在看不到它。我有一个嵌套的flexbox布局。 flex项目的第一级是div，它们本身是display：flex，根据类的不同，它们可以具有行或列的flex-directon：。这些嵌套的弹性项目的第一层和第二层都应增长以填充剩余的父级大小，并在添加新元素时收缩，以免溢出。

我的问题：将新的伸缩项目添加到“第一级”时，这似乎工作正常。但是，将新的flex项目添加到第二级似乎总是会超出父容器的高度。

由于我不太擅长描述此类内容，因此以下是我需要的图片：紫色框是父容器（不是flex）橙色框是具有flex-direction：行的flex容器，红色线是其flex项目（每个项目也是flexbox）。蓝线是嵌套的弹性项目。

Nested Flexbox layout

添加新的红色项目可以根据需要进行工作和扩展或收缩，但是添加新的蓝色项目会使容器溢出。 https://jsfiddle.net/t40x7or8/

这是我的代码示例： CSS

  width: 1800px;
  height: 500px;
  border: 4px blue solid;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-item {
  flex-grow: 1;
  flex-basis: 0;

  display: flex;
}

.flex-item > div {
  flex-grow: 1;
  border: 1px solid orange;
}

.height-1 {
  flex-direction: column;
  max-height: 100%;
}

.height-2 {
  max-height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

  <div class="flex-container">

    <div class="height-2 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/600" />
      </div>
    </div>

    <div class="height-1 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/601" />
      </div>
      <div class="img-div">
        <img src="https://picsum.photos/1080/602" />
      </div>

    </div>
    </div>
  </div>

对不起，我对这种混乱的描述很不满意。感谢您的帮助

Answer 1

我认为我们应该使用flex: 1 1 0来修复弹性项目的布局。

然后使用width: 100%控制内部图像的大小。

https://jsfiddle.net/ramseyfeng/kxf46bju/

.page {
  border: 3px solid green;
  width: 600px;
  height: 300px;
}

.flex {
  display: flex;
}

.cols {
  display: flex;
  flex-direction: row;
}

.rows {
  display: flex;
  flex-direction: column;
}

.flex-1-1-0 {
  flex: 1 1 0;
  
}

.img-div {
  flex: 1 1 0;
  display: flex;
}

.img-div img {
  width: 100%;
}

<div class="page cols">
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/600" />
    </div>
  </div>
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/601" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/1080/602" />
    </div>
  </div>
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/607" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/1080/608" />
    </div>
  </div>
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/605" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/2000/1000" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/2000/1001" />
    </div>
  </div>
</div>

调整弹性项目的大小以适合容器（防止项目溢出）

1 个答案: