阻止儿童弯曲全宽

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)的内容之后.

守则(https://jsfiddle.net/v0o2z9g3/4/):

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