参考资料

1. Flex布局如何优化页面加载速度？
2. css颜色属性详细说明以及案例
3. CSS浮动详细说明以及案例
4. 伪元素选择器详细说明以及案例
5. css div居中代码
6. 如何避免Flex容器高度塌陷？
7. CSS定位详细说明以及案例
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时对齐顶部/底部）。