這裡展示的主要點是使用 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
}