参考资料

1. 动画属性详细说明以及案例
2. CSS 阴影设置
3. css阴影效果属性效果是什么
4. 如何避免 CSS 过渡动画卡顿？
5. display: flex/inline-flex示例
6. 边框属性详细说明以及案例
7. 类选择器详细说明以及案例
8. Vanta.js 如何与 CSS 过渡结合？

详细说明：justify-content: flex-start/end

justify-content: flex-start  

• 作用：将子元素对齐到容器起始位置（左/上）。

• 示例：  

  .container {
    display: flex;
    justify-content: flex-start;
  }

  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

  效果：子元素紧贴容器左侧（默认方向）。

justify-content: flex-end  

• 作用：将子元素对齐到容器末尾位置（右/下）。

• 示例：  

  .container {
    display: flex;
    justify-content: flex-end;
  }

  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

  效果：子元素紧贴容器右侧。

注意：需配合display: flex使用，方向受flex-direction影响（如column时对齐顶部/底部）。