flex和width配合布局

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <style>

      .left-box{

         height:300px;

         

         width:100px

      }

      .middle-box{

         height:300px;

         

         flex:1

      }

      

      .right-box{

         height:300px;

         

         width:150px

      }

   </style>

</head>

<body>

   <div style='width:600px;height:600px;border:solid 1px black;display: flex;'>

      <div class='left-box'>

 

      </div>

      <div class='middle-box'>

         

      </div>

      <div class='right-box'>

         

      </div>

   </div>

</body>

</html>

上一篇:一二面_页面布局


下一篇:外边距塌陷原理