用flex和grid分别实现下面一个简单的布局

弹性布局与网格布局_html5


flex

.wrapper{
        display: flex;
        flex-flow: row wrap;
        height: 35.5rem;
      }
      .wrapper>div{
        border: 0.1rem solid #000;
      }
      .wrapper>div:nth-child(1){
        align-self: flex-start;
        min-width: 100%;
        height: 15%;
      }
      .wrapper>div:nth-child(2){
        width: 30%;
        margin-left: 5%;
      }
      .wrapper>div:nth-child(3){
        width: 60%;
        height: 70%;
      }
      .wrapper>div:nth-child(4){
        width: 100%;
        height: 15%;
      }

grid

.wrapper {
        height: 35.5rem;
        display: grid;
        grid-template-rows: 15% 70% 15%;
        grid-template-areas: 
        "header header header"
        "aside main main"
        "footer footer footer";
      }
      .header{
        grid-area: header;
        border:0.0625rem solid #000;
      }
      .aside{
        grid-area: aside;
        border:0.0625rem solid #000;
        margin-left: 10%;
      }
      .main{
        grid-area: main;
        border:0.0625rem solid #000;
        margin-right: 10%;
      }
      .footer{
        grid-area: footer;
        border:0.0625rem solid #000;
      }

html

<body>
    <div class="wrapper">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
<body>
    <div class="wrapper">
      <header class="header"></header>
      <aside class="aside"></aside>
      <main class="main"></main>
      <footer class="footer"></footer>
    </div>
  </body>

嗯。。感觉还是grid布局更方便灵活些，只是目前支持度还有点欠缺

最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章

弹性布局与网格布局_html5_02