【学习css3】使用flex和grid实现等高元素布局
/* 使用Flexbox实现等高元素布局 */
.container-flex {
display: flex;
}
.flex-item {
flex: 1; /* 均分空间 */
border: 1px solid #000; /* 为了清晰地显示每个元素的边界 */
padding: 10px; /* 内边距 */
}
/* 使用Grid实现等高元素布局 */
.container-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 每列均分 */
grid-gap: 10px; /* 格子间隔 */
}
.grid-item {
border: 1px solid #000; /* 边框 */
padding: 10px; /* 内边距 */
}这段代码展示了如何使用Flexbox和Grid布局来创建一个包含三个等高元素的容器。在Flexbox中，通过给每个子元素设置flex: 1，确保它们会平均分配父容器的空间。在Grid布局中，通过grid-template-columns: 1fr 1fr 1fr设置了三列均分的网格，每列宽度相等。这两种方法都可以实现子元素等高对齐的效果。
评论已关闭