回到首页
个人中心
反馈问题
注册登录
下载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; flex-wrap: wrap; height: 100px; border:1px solid #ccc; } .item{ width: 400px; height: 30px; line-height: 30px; text-align: center; background: #ccc; border-right: 1px solid #fff; } .demo-2{ align-content: flex-end; justify-content:flex-end; } .demo-3{ align-content: center; } .demo-4{ align-content: space-between; } .demo-5{ align-content: space-around ; } </style> </head> <body> <p> flex-start: 默认值。项目位于容器的开头。 </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> flex-end 项目位于容器的结尾。 </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-end 项目位于容器的中心。 </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>space-between 项目位于各行之间留有空白的容器内。</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>space-around 项目在容器的前后留白并</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>
运行结果