使用 flexbox 为什么两个不同比例的图像拉伸不同

Question

我想为左侧一张大图和垂直对齐的两张右侧图片的卡片制作一个 flexbox 网格。一切都很好，并且在 1280 像素的桌面上对齐，但是当图像拉伸为响应式视图时，左侧的图像拉伸得更快，卡片不再垂直对齐。

这里有一个说明问题的代码笔： https://codepen.io/actik/pen/xaZqmG

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.flex {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
}

.row {
  flex-flow: row wrap;
}

.col {
  flex-flow: column wrap;
}

.structure-100 {
  flex: 1 100%;
}

.structure-50 {
  flex: 1 50%;
}

.content {
  color: #fff;
  background-color: #aa0000;
  width: 100%;
  flex: 1 100%;
}

.element_left {
  flex: 1 50%;
  padding-right: 15px;
  padding-bottom: 30px;
}

.element_right {
  flex: 1 50%;
  padding-left: 15px;
  padding-bottom: 30px;
}

.content-text {
  padding: 0 10px;
}

img {
  max-width: 100%;
  height: auto;
  align-self: center;
}

  <div class="wrap">
    <div class="flex row structure-100">     

        <div class="flex col structure-50">    
            <div class="flex element_left">
                <div class="content">
                    <img src="http://www.placebacon.net/625/875/" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>
        </div>



        <div class="flex col structure-50">

            <div class="flex element_right">
              <div class="content">
                <img src="http://www.placebacon.net/625/360" alt="">
                <div class="content-text">
                  <h2>Card title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                </div>
              </div>
            </div>
            <div class="flex element_right">
                <div class="content">
                    <img src="http://www.placebacon.net/625/360" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

我做了很多不同的测试，无法理解这种行为，欢迎任何提示，感谢您的帮助！

编辑：这里 1280px 的版本工作（标题卡在底部对齐）和第二个版本在减小宽度时，2 个图像的底部和标题卡不再对齐。如有必要，我希望红色部分在其底部添加空间，但保持图像和标题对齐。

working version not working

Big image is squashed.

Answer 1

正如我从我们在 cmets 的谈话中了解到的那样，您的问题是左侧部分带有“大”图像（图像不存在于您提供的 sn-p 中，它们存在于您的 CodePen 演示中）确实提供了它的链接）没有像预期的那样拉伸，因为在你的CSS 中你给.flex 类提供了align-items: flex-start; 的规则，这意味着弹性容器的元素应该放在顶部（垂直)，因此，它不会让元素拉伸，相反，您只需在 .flex 类中将这一行 align-items: flex-start; 替换为 align-items: stretch;，这样该类就变为：

.flex {
   display: flex;
   box-sizing: border-box;
   align-items: stretch;
}

这是一个可运行的 sn-p：

$gutter: 30px;

.wrap{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.flex {
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
}

.row {
    flex-flow: row wrap;
}

.col {
    flex-flow: column wrap;
}

.structure-100 {
    flex: 1 percentage(1/1);
}

.structure-50 {
    flex: 1 percentage(1/2);
}

.content {
  color: #fff;
  background-color: #aa0000;
  width: 100%;
  flex: 1 100%; 
  }
.element_left .content {
  display: flex; 
  flex-flow: column wrap;
  }
.element_left {
    flex: 1 percentage(1/2);
    padding-right: $gutter / 2;
    padding-bottom: $gutter;
}
    
.element_right {
    flex: 1 percentage(1/2);
    padding-left: $gutter / 2;
    padding-bottom: $gutter;
}

.content-text {
    padding: 0 10px;
}
.element_left .content .content-text {
  flex-grow: 0;
  margin-top: auto;
}
img {
    max-width: 100%; 
    height: auto;
}
.element_left .content img {
  width: 100%;
  flex-grow: 1;
  align-self: flex-start;
}

  <div class="wrap">
    <div class="flex row structure-100">     

        <div class="flex col structure-50">    
            <div class="flex element_left">
                <div class="content">
                    <img src="http://www.placebacon.net/625/875/" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>
        </div>



        <div class="flex col structure-50">

            <div class="flex element_right">
              <div class="content">
                <img src="http://www.placebacon.net/625/360" alt="">
                <div class="content-text">
                  <h2>Card title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                </div>
              </div>
            </div>
            <div class="flex element_right">
                <div class="content">
                    <img src="http://www.placebacon.net/625/360" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

希望我把你推得更远。