boot flex弹性布局

海绵里没有宝宝

于 2022-05-31 21:03:19 发布

阅读量179

点赞数

本文链接：https://blog.youkuaiyun.com/m0_61090178/article/details/125073375

版权

这篇博客展示了如何使用CSS实现响应式布局，通过`.d-flex`和`.flex-row`类创建了一个弹性布局，并调整了不同屏幕尺寸下`.f-item`元素的显示。在小于768px的屏幕上，`.item1`和`.item3`将被隐藏，以适应移动设备的显示。此外，还定义了不同元素的背景颜色和边框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

在这里插入图片描述