此处演示的主要要点是使用 justify-content: space-between
,它将第一个子元素和最后一个子元素放置在边界框的边缘,并将剩余空间均匀分布在元素之间。对于这些卡片,它们以 Flexbox 显示模式显示,并使用 flex-direction: column
将方向设置为列。
此操作会将标题、说明和图片区块放置在父级卡片内的垂直列中。然后,应用 justify-content: space-between
锚点将第一个元素(标题)和最后一个(图片块)元素放置在 flex 容器的边缘,两者之间的描述性文本将按照相等的间距放置在每个端点上。
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
HTML
<div class="container">
<div class="card">
<h3>Title - Card 1</h3>
<p contenteditable>Medium length description with a few more words here.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 2</h3>
<p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 3</h3>
<p contenteditable>Short Description.</p>
<div class="visual"></div>
</div>
</div>
CSS
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.visual {
height: 100px;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
}
h3 {
margin: 0
}