boot flex弹性布局

最新推荐文章于 2023-02-25 11:00:56 发布

海绵里没有宝宝

最新推荐文章于 2023-02-25 11:00:56 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/m0_61090178/article/details/125073375

版权

<style>
        .p-2{
            background-color: lightblue;
            border: 1px solid black;
        }
        .f-item{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        .d-flex > .f-item:nth-of-type(2){
          flex:0 1 1720px;
          background-color: white;
      }
    
      @media screen and (max-width: 768px)  {
                .item1{
                    display: none;
                }
                .item3{
                    display: none;
                }
            }


    </style>

搭建div盒子

 <div class="header" style="background-color:rgb(0, 0, 145); min-height: 100px; ">header</div>
 <div class="d-flex flex-row">
     <div class="f-item item1">item1</div>
     <div class="f-item item2">item2</div>
     <div class="f-item item3">item3</div>
 </div>
 <div class="footer" style="background-color:rgb(0, 0, 145); min-height: 50px; ">footer</div>