在今天的布局过程中，遇到了一个布局情景，这是一个常用的布局情景
遇到的情景如下图： 为了实现这个布局，使用了flex布局，详细的flex布局如下链接
阮一峰老师flex布局详解
为了方便自己以后的复习，实现了下图的模型 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局的常用情景</title> <style> .box{ width: 400px; height: 200px; display: flex; justify-content: space-between; align-items: center; background: #5e5e5e; } .item{ height: 150px; width: 80px; box-sizing: border-box; border-radius: 32px; font-size: 26px; line-height: 64px; text-align: center; background: rgba(0,0,0,0.5); align-items: center; padding-top: 20px; } .item-img{ width: 50px; height: 50px; border-radius: 50%; background: #67b168; margin: 0 auto; } .item-title{ padding-top: 10px; font-size: 20px; } </style> </head> <body> <div class="box"> <div class="item"> <div class="item-img"></div> <div class="item-title"> 标题一 </div> </div> <div class="item"> <div class="item-img"></div> <div class="item-title"> 标题二 </div> </div> <div class="item"> <div class="item-img"></div> <div class="item-title"> 标题三 </div> </div> <div class="item"> <div class="item-img"></div> <div class="item-title"> 标题四 </div> </div> </div> </body> </html>仅供方便学习使用
