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

参考资料

1. 伪元素选择器详细说明以及案例
2. CSS字体属性详细说明以及案例
3. CSS有哪些常用的选择器？
4. Vanta.js 如何与 CSS 过渡结合？
5. Flexbox 布局有哪些高级用法？
6. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
7. 动画属性详细说明以及案例
8. css阴影颜色怎么设置

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（基线对齐）。