Grid + Flexbox 实战演示

展示 CSS3 现代布局技术的强大能力 —— Grid 二维布局与 Flexbox 一维布局的完美结合

CSS Grid Flexbox 响应式 CSS3

Flexbox 特性卡片

☰

一维布局

Flexbox 专注于一维布局（行或列），通过 justify-content 和 align-items 灵活控制主轴与交叉轴的对齐方式。

▬

弹性伸缩

flex-grow、flex-shrink 和 flex-basis 三个属性让项目在容器中智能分配空间，实现自适应布局。

↻

顺序与对齐

通过 order 属性改变项目的排列顺序，align-self 单独控制某个项目的交叉轴对齐方式。

代码示例

Grid 布局 
.gallery {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}
Flexbox 导航 
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}
响应式适配 
@media (max-width: 768px) {
  .gallery {
    grid-template-columns:
      repeat(auto-fit, minmax(160px, 1fr));
  }

  .info-cards {
    flex-direction: column;
  }
}