参考资料

1. css div内容居中
2. flex-direction: row/column
3. 后代选择器详细说明以及案例
4. css div居中对齐方式
5. Flexbox 布局有哪些高级用法？
6. flex-wrap: wrap/nowrap详细说明
7. CSS3 阴影
8. Flexbox布局有哪些常见的误区？

align-items: flex-start/end详细说明

align-items: flex-start  

• 作用：将弹性子元素沿交叉轴的起点对齐。

• 示例：  

  .container {
    display: flex;
    align-items: flex-start; /* 子元素顶部对齐 */
    height: 200px;
    border: 1px solid black;
  }
  .item {
    width: 50px;
    background: lightblue;
    margin: 5px;
  }

  效果：所有子元素顶部对齐。

align-items: flex-end  

• 作用：将弹性子元素沿交叉轴的终点对齐。

• 示例：  

  .container {
    display: flex;
    align-items: flex-end; /* 子元素底部对齐 */
    height: 200px;
    border: 1px solid black;
  }
  .item {
    width: 50px;
    background: lightblue;
    margin: 5px;
  }

  效果：所有子元素底部对齐。

用法：

• 适用于弹性容器（display: flex 或 display: inline-flex）。

• 控制子元素在交叉轴（默认垂直轴）的对齐方式。

• 其他值：center（居中）、stretch（拉伸）、baseline（基线对齐）。