美文网首页
flex布局,下部自适应高度

flex布局,下部自适应高度

作者: 无花无酒_3cd3 | 来源:发表于2020-12-06 14:42 被阅读0次
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
       display:flex;
       flex-direction:column;
       height: 100%;
    }
    .div1{
      background-color: red;
    }
    .div2{
      background-color: green;
      flex:1;
    }
  </style>  
</head>
<body>
  <div class="box">
      <div class="div1">111 </div>
      <div>3333</div>
      <div class="div2">222</div>
  </div>
  <script>  
  
  </script>
</body>
</html> 

相关文章

网友评论

      本文标题:flex布局,下部自适应高度

      本文链接:https://www.haomeiwen.com/subject/lppowktx.html