如何在 flex 属性下完美地适应内容？

Question

我有 2 个名为 .grid.left 和 .grid.right 的容器。每个 .grids，尤其是 .grid.left 都有一些图像动态方式，那些 .grids 被另一个 div 包装，称为 .gallery。

问题是当我给每个图像框留边距时，浏览器会在 .gallery 内部留出一些空隙，如下所示：

我的期望是摆脱我的 .gallery 的差距，并使图像完全适合，无论我在图像上设置多少 margins。

我打算给 margins 让画廊看起来更好。我想保留这些边距并扩展 .grid.right 的图像以仅适合图像和 .outer div.

有什么正确的方法可以解决这个问题吗？

CodePen

片段：

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  padding-bottom: 60%;
  align-content: stretch;
  margin-left: 1rem;
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

Answer 1

你好，如果我是对的，你只是想摆脱差距并想扩大图像。你可以看看这个。

          * {
            margin: 0 auto;
            padding: 0 auto;
          }
          div, section {
            position: relative;
          }
          .gallery {
            width: 1200px;
            height: 100%;
            border: 1px solid black;
            box-sizing: border-box;
          }
          .article {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row;
            align-items: center;
          }
          .grid {
            height: 100%;
          }
          .left {
            width: 60%;
          }
          .inset-contents {
            width: 100%;
            height: 50%;
          }
          .top {
        
            background-image: url('https://imgur.com/3ozQvk9.jpg');
            padding-bottom: 50%;
          }
          .bottom {
            display: flex;
            flex-flow: row;
          }
          .inner-contents {
            width: 50%;
          }
          .first {
            background-image: url('https://imgur.com/tOMRVDi.jpg');
            padding-bottom: 50%;
          
          }
          .second {
            background-image: url('https://imgur.com/4oewNdx.jpg');
            padding-bottom: 50%;
      
          }
          .right {
            width: 40%;
            background-image: url('https://imgur.com/7gB1jHR.jpg');
            padding-bottom: 60%;
            align-content: stretch;

          }
          .img {
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
          }

        <div class="gallery">
          <div class="article">
            <div class="grid left">
              <a class="inset-contents top img"></a>
              <div class="inset-contents bottom">
                <a class="inner-contents first img"></a>
                <a class="inner-contents second img"></a>
              </div>
            </div>
            <a class="grid right img"></a>
          </div>
        </div>

您只需要删除您在 .gallery 子项中放置的所有边距。

Answer 2

问题在于您如何管理图库中 right 元素的高度：

省略设置 height: 100%（由于 grid class）和 padding-bottom - 您可以通过添加 height: auto 来覆盖它到 right 元素，
从 article 元素中删除 align-items: center 并允许默认 align-items: stretch 接管 - 这将 stretch并将 right 元素的高度与 left.

参见下面的演示：

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  /*align-items: center;*/
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  /*padding-bottom: 60%;
  align-content: stretch; */
  margin-left: 1rem;
  height: auto; /* added */
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

Answer 3

找到解决方案。根据 this 文章，我需要像这样在 .right 中添加 flex-shrink: 0;：

  * {
    margin: 0;
    padding: 0;
  }
  div, section {
    position: relative;
  }
  .gallery {
    width: 1200px;
    height: 100%;
    border: 1px solid black;
    box-sizing: border-box;
  }
  .article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .grid {
    height: 100%;
  }
  .left {
    width: 60%;
  }
  .inset-contents {
    width: 100%;
    height: 50%;
  }
  .top {
    margin-bottom: 1rem;
    background-image: url('https://imgur.com/3ozQvk9.jpg');
    padding-bottom: 50%;
  }
  .bottom {
    display: flex;
    flex-flow: row;
  }
  .inner-contents {
    width: 50%;
  }
  .first {
    background-image: url('https://imgur.com/tOMRVDi.jpg');
    padding-bottom: 50%;
    margin-right: .5rem;
  }
  .second {
    background-image: url('https://imgur.com/4oewNdx.jpg');
    padding-bottom: 50%;
    margin-left: .5rem;
  }
  .right {
    width: 40%;
    background-image: url('https://imgur.com/7gB1jHR.jpg');
    padding-bottom: 60%;
    align-content: stretch;
    margin-left: 1rem;
    flex-shrink: 0;
  }
  .img {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

    <div class="gallery">
      <div class="article">
        <div class="grid left">
          <a class="inset-contents top img"></a>
          <div class="inset-contents bottom">
            <a class="inner-contents first img"></a>
            <a class="inner-contents second img"></a>
          </div>
        </div>
        <a class="grid right img"></a>
      </div>
    </div>

如何在 flex 属性下完美地适应内容？

How to fit contents perfectly under the flex property?

html

css

gallery

flexbox

如何在 flex 属性 下完美地适应内容？

How to fit contents perfectly under the flex property?

html

css

gallery

flexbox

如何在 flex 属性下完美地适应内容？