(bootstrap学习)flex布局

最新推荐文章于 2024-10-16 09:00:00 发布

cat and cats

最新推荐文章于 2024-10-16 09:00:00 发布

阅读量258

点赞数

文章标签： bootstrap 学习 css

本文链接：https://blog.csdn.net/qq_56508310/article/details/125073238

版权

效果图

中屏及以上显示效果

中屏以下显示

在这里插入图片描述

代码部分

    <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>
</head>
<body>
    <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>
</body>