flex实现常见布局

flex相信大家都不陌生，对其各个属性都知道，不同属性的搭配能实现我们常见的复杂布局，可以说简单粗暴了～

1、topbar + main + footbar

 

html代码

<div class="container">
     <header>header...</header>
     <main>内容</main>
     <footer>footer...</footer>
</div>

css代码

header{
  height:100px;
  background:#0de294;
}
footer{
  height:100px;
  background:#0de294;
}
.container{
  display:flex;
  flex-direction:column;
  height:100vh;//屏幕高度的100 %
}
main{
  flex-grow:1;//实现了main自动填充剩余空间
}

2、元素的水平垂直居中

 

html代码

<div class="container">
    <div class="inner">center</div>
</div>

css代码

.container{
  height:300px;
  width:300px;
  border:1px solid #0de294;
  display:flex;
  justify-content:center;  //水平居中
  align-items:center;   //垂直居中
}

.inner{
  color: #0de294;
}

3、圣杯布局

 

html代码

<div class="container">
       <main>main</main>
       <aside>aside</aside>
       <nav>nav</nav>
</div>

css代码

.container{
  display:flex;
  height:100vh;
}
aside{
  width:50px;
  background:#0de294;
}
main{
  flex-grow:1;
}
nav{
  width:80px;
  background:#0de294;
  order:-1;//使得order处于最左侧(html中main写在了最前，以利于优先加载主内容区)
}

4、平均分配空间的栅格布局

html 代码

<div class="row">
         <div class="column">1</div>
         <div  class="column">2</div>
         <div  class="column">3</div>
</div>

css代码

.row{
  display:flex;
  flex-wrap:wrap;
  border:1px solid #0de294;
}
.column{
  list-style:none;
  flex:1;//相当于flex:1 1 0%,而之所以不管各个column元素内容的宽度为多大，都能均分到相等的空间，正是因为相当于在设置了flex-grow:1使得剩余空间按相等比例自动分配的同时又设置了flex-basis:0%,才使得整个空间都平均分配了。
  height:100px;
  border:1px solid black;
}