回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo{ display: flex; } .item{ width: 100px; height: 100px; line-height: 100px; text-align: center; background: #ccc; border-right: 1px solid #fff; } .item:first-child{ height: 120px; } .item:nth-of-type(3){ height: 160px; } .demo-2{ align-items: center; } .demo-3{ align-items:flex-start; } .demo-4{ align-items:flex-end; } .demo-5{ align-items:baseline; } </style> </head> <body> <p> stretch 默认值。元素被拉伸以适应容器。 </p> <div class="demo demo-1"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <p> center 项目位于容器的中心。 </p> <div class="demo demo-2"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <p> flex-start 项目位于容器的头部。 </p> <div class="demo demo-3"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <p> flex-end 项目位于容器的低部。</p> <div class="demo demo-4"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <p>baseline 元素位于容器的基线上。默认情况和 flex-star 一样。</p> <div class="demo demo-5"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body> </html>
运行结果