还在拿flex进行布局吗?快来试试grid网格布局吧

例:

遇到这种布局要求我们应该怎么办?

方法1:使用flex布局

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .gird_Box {
        width: 100vw;
        height: 500px;
        display: flex;
      }
      .item1 {
        background-color: pink;
        flex: 1;
      }
      .line {
        background-color: palegreen;
        width: 20px;
      }
      .item3 {
        background-color: skyblue;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="gird_Box">
      <div class="item1">item1</div>
      <div

猜你喜欢

转载自blog.csdn.net/weixin_42981560/article/details/126359382