现代 CSS 布局技巧与实用弹性盒模型排版指南

随着现代浏览器对 CSS 标准的全面支持，我们早已告别了依赖 float 清除浮动或繁重绝对定位的时代。无论是写个人单页、后台管理系统还是响应式博客，掌握 Flexbox 与 Grid 就能搞定绝大部分界面需求。

一、终极对齐：一行搞定水平垂直居中

在父容器上只需要使用两行 CSS，即可让子元素实现完美居中，无需计算内外边距：

.center-container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
  min-height: 200px;
}

/* 或者使用现代 Grid 写法更加极简： */
.grid-center {
  display: grid;
  place-items: center;
}

二、响应式卡片流：无需写 @media 媒体查询的自适应网格

传统响应式往往需要针对 768px、1024px 写一堆复杂的媒体查询。利用 repeat(auto-fit, minmax(...)) 可以实现流式自适应排布：

.responsive-cards {
  display: grid;
  /* 每个卡片最小 280px，空间足够时自动平分整行 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

三、粘性页脚（Sticky Footer）设计

当页面内容较少时，页脚依然牢牢吸附在视口最底部，而不会突兀地悬空在屏幕中间：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* 撑满剩余垂直空间 */
}

footer {
  margin-top: auto;
}

小结

现代 Web 原生标准提供了极为强大的排版能力，保持 HTML 语义化与 CSS 变量的规范运用，不仅能减少代码量，还能让静态页面的维护变得轻盈而愉快。