Flask前端布局（flex）-疫情可视化

<!DOCTYPE html> 
<html lang="en-US"> 
<head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.44/dist/css/site.min.css" rel="stylesheet">
    
    <style type="text/css">
    
        .box1 {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .box2 {
          display: flex;
          justify-content: space-between;
        }
        .box3 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
        }
    </style>
</head>       
<body style="margin:50px"> 
      <div class="text-center">
       <h3>北京疫情真实数据</h3>
        </div>
       <div class="text-center">
       <small>（2020.01.21～2020.06.30）</small>
        </div> 

      <div class="box2" style='justify-content: space-between;'>
          <div class="box3" style='justify-content: space-between;'>
                <img src="./static/1.png" style="width:400px;height:400px;" />
                <img src="./static/3.png" style="width:400px;height:300px;" />
         </div>
         <div class="box1">
                <img src="./static/5.png" style="width:600px;height:600px;"/>
          </div>
          <div class="box3">
             <img src="./static/2.png" style="width:400px;height:400px;" />
             <img src="./static/4.png" style="width:400px;height:400px;"/>
          </div>  
      </div>
  
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-unveil@1.3.2/jquery.unveil.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/markgoodyear/scrollup@2.4.1/dist/jquery.scrollUp.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@firstandthird/toc@1.4.1/dist/toc.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.44/dist/js/site.min.js"></script>
</body> 
</html>