Question

我有一个项目列表，每个项目都位于display: flex中，以放置其子元素。物品的高度由图像确定，正确位置的按钮应填充物品的垂直空间。但是我做不到。

.Main-item {
    display: flex;
    border: 1px solid gray; 
    margin-bottom: 2px;
}

.Main-img {
    height: 50px;
    width: 50px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.Main-name {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    flex: 1 1;
    padding: 0 10px;
}

.Main-buttonWrapper {
    height: 100%;
    width: 146px;
}

.Main-button {
    height: 100%;
    width: 100%;
}

<div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
</div>

任何想法都会受到欢迎！

Answer 1

创建flex容器时，会使用各种默认的flex规则。

这些默认规则中的两个是flex-direction: row和align-items: stretch。这意味着弹性项目将自动在一行中对齐，并且每个项目都将填充容器的高度。

如果将align-items的值更改为例如flex-start，则如果为flex容器的子级设置了特定的高度，它也会更改默认行为“ stretch”。

因此，只需从height: 100%中删除.Main-buttonWrapper，它将具有默认行为。

为更好地理解，请查看此答案：https://stackoverflow.com/a/33220564/4966662

Answer 2

我已经提高了Main-item + align-items:stretch;的高度。我希望这是您所需要的。

.Main-item {
    align-items:stretch;
    height: 50px;
}

.Main-element {
    padding-top: 16px;
}

.Main-item {
    display: flex;
    border: 1px solid gray; 
    margin-bottom: 2px;
    align-items:stretch;
    height: 50px;
}

.Main-img {
    width: 50px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.Main-name {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    flex: 1 1;
    padding: 0 10px;
}



.Main-buttonWrapper {
    width: 146px;
}

.Main-button {
    width: 100%;
    height: 100%;
}

<div class="Main-element">
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
	<div class="Main-item">
		<img class="Main-img" src="https://picsum.photos/200/300" />
		<div class="Main-name">Lorem ipsum</div>
		<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
	</div>
</div>

Answer 3

默认情况下，flex项沿容器的横轴拉伸，因此，使按钮在视觉上也能拉伸的唯一事情是，将display: flex添加到{{1 }}。

在项目列表中用Flexbox填充垂直空间

3 个答案: