代码及注释 | Notion

下面把三份文件逐行加上中文注释，直接可用。

1) `index.html`

<!DOCTYPE html> <!-- 声明 HTML5 文档类型，启用标准模式 -->
<html lang="zh-CN"> <!-- 页面主语言为中文，利于读屏/拼写检查 -->
<head> <!-- 文档头部：元信息、样式等 -->
  <meta charset="UTF-8"> <!-- 指定字符编码为 UTF-8，避免中文乱码 -->
  <title>Flexbox 布局演示</title> <!-- 浏览器标签栏标题 -->
  <link rel="stylesheet" href="style.css"> <!-- 引入外部样式文件 -->
</head>
<body> <!-- 页面主体内容开始 -->
  <h2>Flexbox 布局演示</h2> <!-- 页面主标题 -->

  <!-- 主轴对齐：控制 justify-content -->
  <label>主轴对齐：
    <select id="justify"> <!-- 下拉框，id 供 JS 选择使用 -->
      <option value="flex-start">flex-start</option> <!-- 子项在主轴起点对齐 -->
      <option value="center" selected>center</option> <!-- 默认：主轴居中 -->
      <option value="flex-end">flex-end</option> <!-- 子项在主轴终点对齐 -->
      <option value="space-between">space-between</option> <!-- 两端对齐，中间等分空隙 -->
      <option value="space-around">space-around</option> <!-- 每个子项两侧空隙相等 -->
    </select>
  </label>

  <!-- 交叉轴对齐：控制 align-items -->
  <label>交叉轴对齐：
    <select id="align"> <!-- 下拉框，id 供 JS 选择使用 -->
      <option value="flex-start">flex-start</option> <!-- 子项在交叉轴起点对齐 -->
      <option value="center" selected>center</option> <!-- 默认：交叉轴居中 -->
      <option value="flex-end">flex-end</option> <!-- 子项在交叉轴终点对齐 -->
      <option value="stretch">stretch</option> <!-- 子项在交叉轴方向被拉伸（需有高度自适应） -->
    </select>
  </label>

  <!-- Flex 容器，内部三个小方块为子项 -->
  <div id="flex-container"> <!-- 通过 CSS 设为 display:flex -->
    <div class="box">1</div> <!-- 第 1 个子项 -->
    <div class="box">2</div> <!-- 第 2 个子项 -->
    <div class="box">3</div> <!-- 第 3 个子项 -->
  </div>

  <script src="script.js"></script> <!-- 引入交互脚本 -->
</body>
</html>

2) `style.css`

/* 容器样式：开启 Flex 布局并提供演示区域 */
#flex-container {                 /* 选择 id 为 flex-container 的元素 */
  display: flex;                  /* 启用 Flex 布局（产生主轴/交叉轴） */
  justify-content: center;        /* 主轴对齐：默认居中（可被 JS 动态覆盖） */
  align-items: center;            /* 交叉轴对齐：默认居中（可被 JS 动态覆盖） */
  height: 200px;                  /* 容器高度，便于观察垂直方向的变化 */
  background: #f8f9fa;            /* 浅灰背景，提升对比度 */
  border: 1px solid #ccc;         /* 边框，清晰显示容器范围 */
  gap: 16px;                      /* 子项之间的间隙（等价于 margin 组合） */
  padding: 8px;                   /* 内边距，避免元素紧贴边框 */
}

/* 子项样式：小方块 */
.box {                            /* 选择 class 为 box 的元素 */
  width: 56px;                    /* 固定宽度，便于排列观察 */
  height: 56px;                   /* 固定高度，如需观察 stretch 可改为 auto */
  background: #e9ecef;            /* 方块背景色 */
  border: 1px solid #adb5bd;      /* 方块边框色 */
  border-radius: 8px;             /* 圆角，观感更友好 */
  display: flex;                  /* 自身也用 flex，方便内部数字居中 */
  justify-content: center;        /* 水平方向把数字居中 */
  align-items: center;            /* 垂直方向把数字居中 */
  font-weight: 700;               /* 数字加粗，更醒目 */
}

3) `script.js`

// 1) 获取需要操作的 DOM 元素
const container = document.getElementById('flex-container'); // Flex 容器
const justify = document.getElementById('justify');          // 主轴对齐下拉框
const align = document.getElementById('align');              // 交叉轴对齐下拉框

// 2) 绑定主轴下拉框的 change 事件：当选项变化时，更新容器的主轴对齐
justify.addEventListener('change', () => {                   // 监听用户选择变化
  container.style.justifyContent = justify.value;            // 把选择的值应用到样式：justify-content
});

// 3) 绑定交叉轴下拉框的 change 事件：当选项变化时，更新容器的交叉轴对齐
align.addEventListener('change', () => {                     // 监听用户选择变化
  container.style.alignItems = align.value;                  // 把选择的值应用到样式：align-items
});

// 4) 可选：初始化时根据当前下拉值同步一次（保证刷新后状态一致）
container.style.justifyContent = justify.value;              // 同步主轴对齐初始值
container.style.alignItems = align.value;                    // 同步交叉轴对齐初始值

1) index.html

2) style.css

3) script.js

1) `index.html`

2) `style.css`

3) `script.js`