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

Question

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

这里有一个说明问题的codepen： 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>

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

编辑：此处 1280 像素的版本有效（标题卡在底部对齐），第二个版本在减小宽度时，2 个图像和标题卡的底部不再对齐。如有必要，我希望红色部分在他的底部添加 space 但保持图像和标题对齐。

working version not working

Big image is squashed.

Answer 1

正如我从我们在评论中的谈话中了解到的那样，您的问题是带有 'big' 图片的左侧部分（图片不存在于您提供的代码段中，它们存在于 CodePen 演示中如果它的 link) 没有像预期的那样伸展，那是因为在你的CSS 中你给了 .flex class 一个 align-items: flex-start; 的规则意味着 flex 容器的元素应该放在顶部（垂直），因此，它不会让元素拉伸，相反，您只需将这一行 align-items: flex-start; 替换为 align-items: stretch;在 .flex class 中，因此 class 变为：

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

这是一个可运行的片段：

$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>

希望我能进一步推动你。

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

Using flexbox why two images with different proportions stretch differently

css

image

flexbox

responsive