Flexbox弹性布局

Flexbox适合一维布局（行或列），轻松实现水平垂直居中、等高列、自适应间距。

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

CSS Grid网格布局

Grid适合二维布局（行和列），可创建复杂的页面结构。

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

选择指南

导航栏、按钮组用Flexbox；页面整体布局、卡片网格用Grid。