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

参考资料

1. CSS响应式详细说明以及案例
2. 有没有推荐的 CSS 过渡动画库？
3. css让div居中的几种方法
4. css中div居中详细说明
5. Flexbox 布局有哪些高级用法？
6. css div阴影效果,
7. css div阴影效果
8. css div居中代码

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时对齐顶部/底部）。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。