Flexbox 是现代 CSS 中最常用的布局方案，掌握以下几个核心属性，基本上能解决 90% 的布局问题。

一、开启 Flex 容器

给父元素添加 display: flex，子元素自动变为弹性项目（flex item）。

.container {
  display: flex;
}

二、主轴方向排列

justify-content 控制主轴（默认水平）方向的排列方式：

• flex-start - 左对齐（默认）
• center - 水平居中
• space-between - 两端对齐，中间等分
• space-around - 每个项目两侧间距相等
• space-evenly - 间距完全均等

三、交叉轴对齐

align-items 控制交叉轴（默认垂直）方向的对齐：

• stretch - 拉伸填满（默认）
• center - 垂直居中 ⭐ 最常用
• flex-start - 顶部对齐
• flex-end - 底部对齐

四、换行与自适应

flex-wrap: wrap 允许子元素换行，配合 gap 属性轻松实现响应式网格布局：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  flex: 1 1 300px;  /* 可伸缩，基础宽度300px */
}

技巧：flex: 1 让子元素平分剩余空间，是自适应布局的常用技巧。三个值分别代表 flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础尺寸）。

浏览器 localStorage 是前端持久化数据最简单的方案，无需后端，数据保存在用户本地，关闭浏览器也不丢失。

一、基本读写操作

// 存储
localStorage.setItem('username', '张三');

// 读取
const name = localStorage.getItem('username');

// 删除
localStorage.removeItem('username');

// 清空全部
localStorage.clear();

二、对象存储必须序列化

localStorage 只能存储字符串，对象需要先用 JSON.stringify() 转换：

const user = { name: '张三', age: 25 };

// 存储时序列化
localStorage.setItem('user', JSON.stringify(user));

// 读取时反序列化
const saved = JSON.parse(localStorage.getItem('user'));

三、异常处理

隐私模式下 localStorage 可能被禁用，建议用 try-catch 包裹：

function safeSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (e) {
    console.warn('存储失败:', e);
    return false;
  }
}

四、使用限制

• 容量：约 5MB，不同浏览器略有差异
• 类型：只能存字符串，对象需序列化
• 作用域：同源策略限制，仅限当前域名
• 时效：永久保存，除非用户手动清除

建议：对于敏感数据或大量数据，应考虑 IndexedDB 或后端存储。localStorage 适合存储用户偏好设置、临时表单数据等轻量信息。

在做血压记录和记账本的过程中，总结出一套可复用的小工具开发流程。按照以下步骤，可以快速搭建出一个功能完整、体验良好的前端应用。

第一步：确定数据结构

动手写代码之前，先想清楚每条记录要存哪些字段，画出数据对象的格式：

// 以记账为例
const record = {
  id: 1,              // 唯一标识
  date: '2026-01-15', // 日期
  type: 'expense',    // 收入/支出
  category: '餐饮',    // 分类
  amount: 35.00,      // 金额
  note: '午餐'         // 备注
};

数据结构决定了后续增删改查的复杂度，前期多花点时间设计，后期会省很多事。

第二步：封装数据操作

把 localStorage 的读写封装成独立函数，其他地方统一调用：

const STORAGE_KEY = 'my_app_records';

function getRecords() {
  const data = localStorage.getItem(STORAGE_KEY);
  return data ? JSON.parse(data) : [];
}

function saveRecords(records) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(records));
}

function addRecord(record) {
  const records = getRecords();
  records.push({ ...record, id: Date.now() });
  saveRecords(records);
}

第三步：视图渲染

用 JavaScript 动态生成 HTML，让数据和界面保持同步：

function renderList() {
  const records = getRecords();
  const html = records.map(r => `
    <div class="item">
      <span>${r.date}</span>
      <span>${r.category}</span>
      <span>¥${r.amount}</span>
    </div>
  `).join('');
  document.getElementById('list').innerHTML = html;
}

第四步：交互细节

基础功能完成后，加上这些细节能大幅提升用户体验：

• 表单验证：必填项检查、数字格式校验
• 操作确认：删除前弹窗确认，防止误操作
• 空状态：没有数据时显示友好的提示
• 加载反馈：操作后给出成功/失败的提示

第五步：法律合规

个人工具虽然规模小，但也要明确用途限制，避免不必要的法律风险：

在页面显眼位置添加免责声明，说明工具仅供学习参考，不提供专业建议（如医疗、财务等）。数据存储在本地，用户需自行承担使用风险。

按照这套流程，从构思到上线，一个完整的小工具大概需要 2-3 天的开发时间。关键是先跑通核心流程，再逐步迭代优化。

随着 AI 技术的高速发展，前端开发正在经历前所未有的变革。GitHub Copilot、ChatGPT 等工具的出现，让"人人都是程序员"成为可能，也让不少前端开发者产生焦虑：AI 会不会取代我们的工作？这篇文章想分享一些我的思考。

一、AI 带来的冲击与挑战

不可否认，AI 正在改变前端开发的格局：

• 基础代码生成速度提升：简单的页面结构、常见的组件代码，AI 几秒钟就能生成
• 入门门槛降低：即使没有系统学习过编程，也能借助 AI 快速搭建一个像样的网页
• 岗位竞争加剧：AI 工具让更多人能够参与前端开发，初级岗位的竞争愈发激烈

二、AI 无法替代的核心能力

但我认为，AI 短期内无法完全替代前端开发者，因为这些能力它做得还不够好：

• 业务理解与产品思维：AI 不懂业务需求，无法站在用户角度思考交互体验
• 复杂系统的架构设计：大规模前端应用的模块划分、性能优化、团队协作，需要经验积累
• 用户体验与视觉设计：好用的界面不仅能跑，还要美观、易用，这需要审美和同理心
• 异常情况处理：AI 生成代码面对特殊场景、边界条件时容易出错，需要人工把关

三、破局之道：AI + 前端的复合能力

面对 AI 的冲击，我认为最好的应对策略是 拥抱 AI，成为"AI + 前端"的复合型人才：

1. 熟练使用 AI 工具提升效率

把 AI 当作"超级助手"，让它帮你处理重复性工作：代码补全、文档查询、bug 排查、单元测试生成……善用这些工具，可以把效率提升 30%-50%。

2. 深化前端核心技能

不要满足于"能写页面"，要深入理解浏览器原理、性能优化、架构设计。这些 AI 难以替代的能力，才是我们真正的护城河。

3. 培养产品思维

多参与需求讨论，理解业务逻辑，学习如何把抽象的需求转化为具体的产品方案。技术最终要为业务服务，只有懂业务的技术人才能走得更远。

4. 持续学习新技术

前端技术更新快，Vue、React、Next.js、Server Components……保持学习的热情，跟上技术发展的步伐。AI 时 代，唯一不变的就是变化。

总结：AI 不是前端的敌人，而是强有力的助手。真正的竞争力不在于和 AI 比谁写代码快，而在于能否把 AI 变成自己的"第二大脑"，同时不断强化 AI 无法替代的核心能力。AI + 前端的复合能力，才是这个时代前端开发者的破局之道。

Prompt（提示词）是与 AI 沟通的桥梁，好的提示词能获得更准确、更有价值的回答。这是我学习 Prompt 工程的一些心得。

一、好的 Prompt 要素

• 明确任务：清楚说明需要 AI 做什么
• 提供上下文：说明背景信息，帮助 AI 理解需求
• 指定格式：告诉 AI 希望以什么形式输出
• 限定范围：如果需要特定领域的回答，要明确说明

二、常用 Prompt 技巧

// ❌ 模糊的提问
帮我写个函数

// ✅ 明确的提问
帮我写一个 JavaScript 函数，接收日期字符串 '2026-03-24'，
返回格式化为 '2026年3月24日' 的字符串，要求：
1. 使用 ES6+ 语法
2. 包含错误处理
3. 给出使用示例

三、前端开发常用 Prompt 模板

• 代码解释："用通俗易懂的语言解释下面这段代码..."
• bug 排查："我遇到了 [具体报错]，可能是什么原因..."
• 优化建议："帮我优化这段代码，提升可读性和性能..."
• 知识总结："总结一下 [某个概念] 的核心知识点..."

四、实践建议

迭代优化：不要期待一次提问就得到完美答案。通过不断调整提示词，逐渐接近目标，这个过程本身就是很好的学习。