问题：
停止flex子被全宽度[复制]
罗安宁
我创建了一行项目，并使用flex使它们的高度匹配。然而，这导致我在项目中的链接变成全宽度，而我只是希望它是一个自动宽度。我尝试将其设置为show： 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; }html prettyprint-override"><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>
我基本上需要黄色块在文本结束的地方结束，而不是延伸到容器边缘。
谢啦
共有2个答案
盛嘉
移除显示：flex；弯曲方向：立柱
来自显示：flex
。。col。要使它们的高度相等，只需。行待
这是升级的小提琴
.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>
巴学潞
您只需将align self:flex start设置为类。资源项目链接。在此解决方案中，超链接元素（
css lang-css prettyprint-override">.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>
类似资料：
-
我有一个灵活的布局，看起来像这样： 这很好，但是当产品描述很长时，我想隐藏溢出并显示省略号。 有一个类为的flex容器，它有两个flex子容器-（30%）和（70%）。右侧的
-
我遇到的最后一个问题与这里的链接相同：flexbox项目的宽度被忽略 一切看起来都很好，但在最后一刻，我想更改flex容器的方向，所以我添加了
-
Fixed 盒子数量不是固定的 Fixed 盒子宽度是固定的 Fill 盒子只有一个 Fill 盒子宽度是动态的 如何让 Fill 填满剩余 Container 的宽度? 如下图
-
问题内容： 使用flexbox时遇到问题。 我正在使用容器，因此我的内部物品实际上可以放在多列中。 问题在于浏览器仍将容器的宽度计算 为内部项目宽度的总和 ！ 我的容器块应具有较小的宽度（基于内容大小），但实际上很大。 无论如何，使用列而不是行时以这种方式计算容器的宽度也是非常不自然的。 看一下我代码中的绿色方块。它具有巨大的优势，但事实并非如此。此外，当您从容器中取出物品时，它会变小。 我期望容
-
我有一个基于CssLayout的视图，它有一个预定义的最小宽度，但可以扩展以填充整个屏幕。这个视图，我们称之为父视图，在列表视图中有子视图。每个子级都是扩展HorizontalLayout的同一类的实例。 我有几个布局问题。 首先，由于封装垂直布局为每个孩子提供了一定百分比的空间，而不是允许他们根据自己的高度适当地分配空间，因此孩子们彼此重叠。VerticalLayout是必需的，因为当列表大于父
-
我有一个带有两个子容器的flex-box容器，在屏幕较小的情况下，右边的容器应该折叠在左边的容器下面。然而，这似乎只在父容器宽度为100%时才起作用，而当它设置为固定宽度时则不起作用。它需要一个基于设计的固定宽度，我尝试将固定宽度的容器包装在具有100%宽度的父容器中，但这并不有效。 如何将容器设置为固定宽度，以便项目在较小屏幕尺寸下正确换行？ null null JSFIDDLE链接：链接