在flex中对齐div以占据容器的整个宽度[重复]答案

【问题标题】：Align div inside a flex to occupy whole width of the container [duplicate]在flex中对齐div以占据容器的整个宽度[重复]
【发布时间】：2020-11-01 05:23:56
【问题描述】：

我有两张内容不同的卡片。我想将所有具有不同内容长度的卡片的宽度拉伸到相同的宽度。意思是，内容的宽度应该延伸到专辑封面。我如何在此处设置width 属性，以便在所有卡片中获得恒定宽度。有人可以帮忙吗？

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image {
  width: 150px;
  height: 150px;
  float: right;
  border: 1px solid green;
}

.footer {
  float: bottom;
}

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

<div class="card">
  <div class="card-content">
    <div>Music controls</div>
    <div class="footer">footer</div>
  </div>
  <div class="image">Album Cover</div>
</div>
<br />
<div class="card">
  <div class="card-content">
    <div>Adding Music controls more options</div>
    <div class="footer">footer</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【问题讨论】：

.card-content {flex: 1}
@VXp 哇！解决了！但很想知道为什么？
stackoverflow.com/questions/37386244/what-does-flex-1-mean
flex 是简写。实际上你应该使用 flex-grow

标签： html css

【解决方案1】：

将flex-grow: 1 添加到.card-content

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image {
  width: 150px;
  height: 150px;
  float: right;
  border: 1px solid green;
}

.footer {
  float: bottom;
}

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

<div class="card">
  <div class="card-content">
    <div>Music controls</div>
    <div class="footer">footer</div>
  </div>
  <div class="image">Album Cover</div>
</div>
<br />
<div class="card">
  <div class="card-content">
    <div>Adding Music controls more options</div>
    <div class="footer">footer</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【讨论】：