ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

flex布局精进: align-items: stretch;属性

2026/8/8 17:13:17 拓冰建站 浏览量
flex布局精进:  align-items: stretch;属性

 

问题1:多个盒子排列时,不同盒子内容不同,导致高度不同

此时如果想让所有盒子的高度/宽度一致:

display: flex;
align-items: stretch;

含义,flex布局下,卡片高度、宽度拉伸,使其与高度(宽度)最大的孩子保持一致

问题1:高度保持一致后,内部的布局会受影响,如何维持原来的布局:

一般情况下使用min-height/min-height来设置最小高度宽度,撑起布局,此处可使用flex的特性,为卡片的某子级直接设置width/height为100%,即可自动撑起布局,保持原样