现代CSS布局技术完全指南

1. 传统布局方式

在Flexbox和Grid出现之前，开发者主要使用浮动（float）、定位（position）和表格（table）进行页面布局。这些方法虽然可以实现各种布局，但代码复杂且难以维护。

2. Flexbox弹性布局

Flexbox是一维布局模型，最适合在一条直线上排列元素。使用我们的CSS在线编辑器可以实时测试Flexbox效果。

.flex-container {
    display: flex;
    justify-content: center;  /* 主轴对齐 */
    align-items: center;      /* 交叉轴对齐 */
    gap: 16px;               /* 项目间距 */
    flex-wrap: wrap;          /* 自动换行 */
}

3. CSS Grid网格布局

Grid是二维布局模型，同时处理行和列，适合复杂的页面布局设计。

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

.grid-item {
    grid-column: span 2;     /* 跨2列 */
}

4. 响应式设计

使用媒体查询（Media Queries）实现不同屏幕尺寸的适配：

/* 移动端优先 */
.container { padding: 16px; }

/* 平板 */
@media (min-width: 768px) {
    .container { padding: 24px; }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container { padding: 32px; }
}

5. 实战：居中布局

使用Flexbox实现水平和垂直居中：

.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

使用我们的CSS在线编辑器和CSS渐变生成器可以轻松创建精美的Web页面。了解更多CSS技巧，请访问HTML在线编辑器。