开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <title>align-items: flex-end</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { display: flex; align-items: flex-end; height: 200px; border: 2px solid #333; background: #f0f0f0; margin-bottom: 30px; } .item { width: 80px; margin: 0 10px; background: lightgreen; padding: 10px; box-sizing: border-box; } .item:nth-child(2) { height: 120px; } h2 { color: #333; } </style> </head> <body> <h2>align-items: flex-end</h2> <div class="container"> <div class="item">项目1</div> <div class="item">项目2 (高度120px)</div> <div class="item">项目3</div> </div> <p>所有项目对齐到容器的底部（交叉轴终点）</p> </body> </html>
运行结果：
