Flexbox 布局详解

Flexbox（弹性盒子）是一种一维布局模型，适合用于组件级别的布局。

容器属性

display: flex - 启用 Flexbox 布局

flex-direction - 主轴方向（row/column）

justify-content - 主轴对齐方式

align-items - 交叉轴对齐方式

flex-wrap - 是否换行

gap - 项目间距

flex-direction: row（默认）

1

2

3

flex-direction: column

1

2

3

justify-content: center + align-items: center

居中项目

justify-content: space-between

左

中

右

/* Flexbox 容器示例 */
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Flexbox 项目属性 */
.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px;
}
            

项目属性

flex-grow - 放大比例（默认 0）

flex-shrink - 缩小比例（默认 1）

flex-basis - 基础大小

order - 排列顺序（默认 0）

align-self - 单独对齐方式

实战案例：导航栏

/* 导航栏布局 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}
                

Grid 布局详解

Grid（网格布局）是一种二维布局模型，适合用于页面级别的复杂布局。

网格定义

grid-template-columns - 定义列

grid-template-rows - 定义行

grid-template-areas - 定义区域

gap - 行列间距

基础网格：3 列等宽

1

2

3

4

5

6

区域布局：使用 grid-template-areas

Header

Main Content

/* Grid 区域布局 */
.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
            

实用单位

fr - 分数单位，自动分配剩余空间

minmax() - 设置最小/最大值

repeat() - 重复定义

auto-fit/auto-fill - 自动填充

/* 响应式网格 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
            

经典布局模式

掌握经典布局模式，能够快速构建常见的页面结构。

圣杯布局（Holy Grail Layout）

三栏布局，中间内容区优先加载，两侧为导航和附加信息

Header

Main Content

粘性页脚布局（Sticky Footer）

内容不足时页脚固定在底部，内容超出时页脚跟随内容

/* Sticky Footer 实现 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}
                

分屏布局（Split-screen）

将页面分为两个等宽区域，适合对比展示或登录注册页面

/* 分屏布局 */
.split-screen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .split-screen {
        grid-template-columns: 1fr;
    }
}
                

瀑布流布局（Masonry）

类似 Pinterest 的不等高卡片布局

/* CSS Column 实现瀑布流 */
.masonry {
    column-count: 3;
    column-gap: 1rem;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}
                

响应式设计

创建适配不同设备的响应式页面，提升用户体验。

断点设计策略

移动优先：从小屏幕开始，逐步增强

桌面优先：从大屏幕开始，逐步简化

内容驱动：根据内容断点，而非特定设备

常用断点设置

设备类型	断点	说明
手机	< 576px	竖屏手机
平板	≥ 768px	平板设备
桌面	≥ 992px	笔记本电脑
大屏	≥ 1200px	台式显示器

响应式组件

响应式导航栏：小屏幕显示汉堡菜单

响应式表格：横向滚动或卡片式展示

响应式图片：使用 srcset 和 sizes

响应式卡片：自动调整列数

/* 响应式卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 响应式图片 */
img {
    max-width: 100%;
    height: auto;
}
            

视觉设计原则

良好的视觉设计能够提升页面的美观度和可读性。

视觉层次

大小对比：重要元素使用更大尺寸

色彩对比：使用对比色突出重点

空间层次：通过间距区分内容组

字体层级：标题、正文、注释使用不同字号

留白运用

内边距（padding）：内容与边框之间的距离

外边距（margin）：元素之间的距离

呼吸感：适当留白让页面更舒适

分组原则：相关内容靠近，无关内容远离

对齐原则

左对齐：最符合阅读习惯

居中对齐：适合标题和简短内容

右对齐：适合数字和特殊场景

网格对齐：保持整体一致性

字体层级示例

一级标题（2rem）

二级标题（1.5rem）

三级标题（1.25rem）

正文内容（1rem）- 行高 1.6 倍，保证可读性

注释文字（0.875rem）- 用于辅助说明

文档整理研习录

版面研习