1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         .box{
    9.             border: 1px solid black;
    10.             display: flex;
    11.         }
    12.         .item{
    13.             width: 150px;
    14.             height: 100px;
    15.             line-height: 100px;
    16.             border: 1px solid salmon;
    17.             color: salmon;
    18.             font-size: 40px;
    19.             font-weight: 800;
    20.             text-align: center;
    21.         }
    23.         .item:nth-child(4){  /*（）为索引 */
    24.             flex: 1;/*分配剩余的宽度*/
    25.         }
    26.         .item:nth-child(5){
    27.             flex: 2;/*分配剩余的宽度*/
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.     <p>如果一行有多个块级元素，可以用弹性盒子</p>
    33.     <div class="box">
    34.         <div class="item">1</div>
    35.         <div class="item">2</div>
    36.         <div class="item">3</div>
    37.         <div class="item">4</div>
    38.         <div class="item">5</div>
    39.     </div>
    40. </body>
    41. </html>