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>

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

编辑：此处的版本工作于1280像素（标题卡在底部对齐），第二个版本在缩小宽度时，两个图像和标题卡的底部不再对齐。我希望红色部分在必要时在他的底部添加空间，但要保持图像和标题对齐。

working version not working

Big image is squashed.

Answer 1

正如我在评论中的谈话中所了解的那样，您的问题是带有“大”图像的左侧部分（这些图像未出现在您提供的代码段中，而是出现在您提供的CodePen演示中）它的链接）没有按预期的方式拉伸，这是因为在您的CSS中给.flex类赋予了align-items: flex-start;规则，这意味着应将flex容器的元素放在顶部（垂直），因此，它不允许元素拉伸，相反，您只需要在align-items: flex-start;类中将此行align-items: stretch;替换为.flex，则该类变成：

.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为什么两个比例不同的图像拉伸不同

1 个答案: