控制項目在交叉軸上的對齊方式
拉伸填滿(預設)css
.align-stretch {
display: flex;
align-items: stretch;
/* 子元素會被拉伸到和容器一樣高 (預設值) */
height: 100px;
/* 容器高度固定 100px */
}
html
<div class="align-stretch">
<div style="background:#e67e22; width:80px;">Box 1</div>
<div style="background:#3498db; width:80px;">Box 2</div>
<div style="background:#2ecc71; width:80px;">Box 3</div>
</div>
iThome鐵人賽
看影片追技術