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/）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从display:flex;flex-direction:column;移除.col。要使它们达到相同的高度，您只需要.row为display:flex;。

此处更新fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

阻止儿童弯曲全宽

2 个答案: