search

ivan135 / learn-blog

0 stars 0 forks source link

flex实现四个子元素分布在四个边缘 #4

Open ivan135 opened 5 years ago

ivan135 commented 5 years ago 
   <div class="container">
     <header>   <div class="item"></div>
   <div class="item"></div></header>
     <main>内容</main>
     <footer>  <div class="item"></div>
   <div class="item"></div></footer>
   </div>

.item{
    /* flex: 0 0 40%; */
    width: 100px;
    height: 80px;
    box-sizing: border-box;
    border: 1px solid red
}

header{
  height:100px;
  background:#ccc;
  display: flex;
  justify-content: space-between;
}

footer{
  height:100px;
  background:#ccc;
   display: flex;
   justify-content: space-between;
  align-items: flex-end;
}
.container{
  display:flex;
  flex-direction:column;
  height:100vh;
}
main{
  flex-grow:1;
}