Question

我正在尝试使用flexbox来布局如下内容：

 -- ------ --
|  |      |  |
|--|      |--|
|  |      |  |
 -- ------ --

每个角落的“盒子”里面都有一个img，长宽比为1：1（方形）。中心的“盒子”是3：2。

问题是无论出于何种原因，角落盒和中心盒的高度都大于其内部的响应式img的高度，我试图让它们完美对齐。

如何让flex项正确排列？

这是一个codepen：https://codepen.io/codybarr/pen/zNgpVK

编辑：将display: flex添加到.container .item修复了Firefox中的问题，但未解决Chrome / Safari问题。现在图像延伸到它们的全分辨率高度......很奇怪......

img {
  max-width: 100%;
}

@media (min-width: 700px) {
  .main {
    display: flex;
    flex-direction: row;
    background-color: orange;
  }
  .container {
    display: flex;
    flex-direction: column;
  }
  .container.second-column {
    flex: 1 0 60%;
  }
  .container .item {
    display: flex;
  }
  .container.second-column .item {}
  .container.first-column .item:nth-child(1) {
    background-color: blue;
  }
  .container.first-column .item:nth-child(2) {
    background-color: yellow;
  }
  .container.third-column .item:nth-child(1) {
    background-color: red;
  }
  .container.third-column .item:nth-child(2) {
    background-color: green;
  }
}

<head>
  <title>Flex Testing</title>
</head>

<body>
  <h1>Flex Test!</h1>
  <div class="main">
    <div class="container first-column">
      <div class="item">
        <img src="http://i-cdn.phonearena.com/images/article/90741-image/Google-touts-advanced-recipe-search-in-mobile-app.jpg" />
      </div>
      <div class="item">
        <img src="https://lh3.googleusercontent.com/-cigJW9TQSRU/AAAAAAAAAAI/AAAAAAAAABg/Pg3e9ogcsHU/s640/photo.jpg" />
      </div>
    </div>
    <div class="container second-column">
      <div class="item">
        <img src="https://www.inetsolutions.org/wp-content/uploads/2016/01/Capital-Letters-in-URLs-Do-Not-Influence-Google-Rankings.png" />
      </div>
    </div>
    <div class="container third-column">
      <div class="item">
        <img src="http://www.sociallyawareblog.com/files/2016/12/GettyImages-610773752_small.jpg" />
      </div>
      <div class="item">
        <img src="https://s-media-cache-ak0.pinimg.com/564x/b1/e2/db/b1e2dbe6c6b547a2ebc53a49fc3ffa8c.jpg" />
      </div>
    </div>
  </div>
</body>

Answer 1

Flex容器的初始设置为align-items: stretch。这意味着默认情况下，flex项目将展开以覆盖容器横轴的整个长度。

考虑使用align-items: flex-start覆盖默认值。

 container .item {
   display: flex;
   align-items: flex-start; /* new */
 }

revised codepen

带图像的Flexbox网格 - 保持宽高比/比例

1 个答案: