Flexbox - 具有全高度平方图像的水平分量

Question

我尝试用flexbox实现一个看似简单的任务,但是几小时后,我失败了...

我只是想创建一个响应式水平组件,左侧的图像始终是100%高度,右侧是一些灵活的宽度文本.

应该很容易,但在最好的情况下,图像永远不会停止重叠......

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 1

你只需要将 flex 属性添加到 .card-img

您可以在这里了解有关 flex 属性的更多信息：https ://www.w3schools.com/cssref/css3_pr_flex.asp

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
  display: flex; //just add this line
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>