阻止 flex child 成为全宽 [重复]

Question

我创建了一行项目并使用 flex 使它们的高度匹配。但是，当我只想让它成为自动宽度时，这会导致我在项目中的链接变成全宽。我试过将它设置为display: inline-block，但这并没有解决它。

这是一个小提琴：https://jsfiddle.net/v0o2z9g3/2/

.row {
  display: flex;
  flex-direction: row; }

  .col {
    display: flex;
    flex-direction: column;
    padding: 0 0 15px 0;
    margin: 0 19px 65px;
    width: calc((100% / 3) - 38px);
    background: red; }
    .col .resource-item__title {
      font-weight: bolder; }
      .col .resource-item__summary {
        margin: 0 0 5px 0; }
        .col .resource-item__link {
          display: inline-block;
          background: yellow;
          margin-top: auto; }
          .col .resource-item__icon {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            color: green;
            font-size: 22px;
            cursor: default; }
            .col .resource-item__icon.disabledIcon {
              color: red; }

<div class="row">
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
</div>

我基本上要求黄色块在文本结束的地方结束，而不是延伸到容器边缘。

谢谢

Answer 1

您可以简单地将align-self: flex-start 设置为.resource-item__link 类。在此解决方案中，超链接元素 (<a>) 都位于同一级别，而不是直接放在每列内容的下方 (.col)。

.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
  padding: 0 0 15px 0;
  margin: 0 19px 65px;
  width: calc((100% / 3) - 38px);
  background: red; 
}
.col .resource-item__title {
  font-weight: bolder; 
}
.col .resource-item__summary {
  margin: 0 0 5px 0;
}
.col .resource-item__link {
  align-self:flex-start;
  background: yellow;
  margin-top: auto;
}
.col .resource-item__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: green;
  font-size: 22px;
  cursor: default;
}
.col .resource-item__icon.disabledIcon {
  color: red; 
}

<div class="row">
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
</div>

也看看这些问题：

• Make flex items take content width, not width of parent container
• Prevent flex items from stretching

Answer 2

从.col 中删除display:flex;flex-direction:column;。要使它们的高度相等，您只需要将 .row 设为 display:flex;。

这里更新了fiddle

.row {
  display: flex;
  flex-direction: row; }

  .col {
    padding: 0 0 15px 0;
    margin: 0 19px 65px;
    width: calc((100% / 3) - 38px);
    background: red; }
    .col .resource-item__title {
      font-weight: bolder; }
      .col .resource-item__summary {
        margin: 0 0 5px 0; }
        .col .resource-item__link {
          display: inline-block;
          background: yellow;
          margin-top: auto; }
          .col .resource-item__icon {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            color: green;
            font-size: 22px;
            cursor: default; }
            .col .resource-item__icon.disabledIcon {
              color: red; }

<div class="row">
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
</div>