進一步瞭解flex佈局

進一步瞭解flex佈局—來實現這些常見佈局吧

  flex佈局具備便捷、靈活的特色，熟練的運用flex佈局能解決大部分佈局問題，這裏對一些經常使用佈局場景作一些總結。

web頁面佈局(topbar + main + footbar)

示例代碼

  要實現的效果以下：

圖1

  html代碼：

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

  css代碼：

header{
  height:100px;
  background:#ccc; } footer{ height:100px; background:#ccc; } .container{ display:flex; flex-direction:column; height:100vh; } main{ flex-grow:1; } 

應用的flex屬性

  本例中主要應用瞭如下flex屬性：

1. flex-direction:column 使總體佈局從上到下排列
2. flex-grow:1, 應用於main，使得main自動填充剩餘空間

本例中應用以較少的css代碼實現了傳統的上中下頁面佈局，其中的關鍵經過flex-grow的使用避免了當main內容過少時footer部分會被提高到頁面上方的問題(傳統方式上可能須要靠絕對定位來解決了~)

每行的項目數固定並自動換行的列表項

  要實現的效果以下：

圖2

  html代碼：

示例代碼

  css代碼：

ul{
  display:flex;
  flex-wrap:wrap;
}
li{
  list-style:none;
  flex:0 0 25%;
  background:#ddd; height:100px; border:1px solid red; } 

應用的flex屬性

  本例中主要應用瞭如下flex屬性：

1. flex:0 0 25%,至關於flex-basis:25%，使得每個列表項的寬度佔外層容器(本例中的ul元素)的25%，所以每行最多可以排開四個列表項。

2. flex-wrap:wrap,使得每行填滿時會自動換行

實現自動劃分多餘空間的列表項

  本例的效果和上例中的圖2很類似，只是每行爲3個固定寬度的列表項，而且各列表項之間留有相同寬度的空隙

圖3

  傳統方式上實現這種效果，不可避免的要用到負margin，那麼如今來看了用flex實現的方式吧

示例代碼

  css代碼：

ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  border:1px solid black;
}
li{
  list-style:none;
  width:120px;
  background:#ddd; height:100px; border:1px solid red; } 

應用的flex屬性

  本例中主要應用瞭如下flex屬性：

1. justify-content:space-between;使主軸方向的多餘空間平均分配在兩兩item之間

平均分配空間的柵格佈局

  各大UI裏柵格佈局基本是必備的佈局之一，平均分配佈局又是柵格佈局裏最經常使用的佈局，利用flex實現平均分配的柵格佈局，關鍵之處就是利用它的自動收縮空間。

圖4

示例

  html以下：

<div class="row"> <div class="column">column1</div> <div class="column">colum22</div> <div class="column">colum322</div> </div> 

  css以下：

.row{
  display:flex;
  flex-wrap:wrap;
  border:1px solid black;
}
.column{
  list-style:none;
  background:#ddd; flex:1; height:100px; border:1px solid red; } 

應用的flex屬性

  本例中主要應用瞭如下flex屬性：

1. flex:1 這裏針對item應用了flex:1,至關於flex:1 1 0%,而之因此無論各個column元素內容的寬度爲多大，都能均分到相等的空間，正式由於至關於在設置了flex-grow:1使得剩餘空間按相等比例自動分配的同時又設置了flex-basis:0%,才使得整個空間都平均分配了。

聖盃佈局

  傳統的聖盃佈局須要涉及絕對定位、浮動、負margin等幾大最頭疼屬性，有了flex佈局之後發現，原來這麼簡單的配方，也能實現這麼複雜的效果哈~

圖5 聖盃佈局

示例代碼

  html代碼：

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

  css代碼：

.container{
  display:flex;
  height:100vh;
}
aside{
  width:50px;
  background:#ccc; } main{ flex-grow:1; background:#def; } nav{ width:80px; background:#ccc; order:-1; } 

應用的flex屬性

1. 對main用flex-grow:1,使得中間主元素空間自動擴充
2. 對nav應用order:-1,使得order處於最左側(html中main寫在了最前，以利於優先加載主內容區)

元素水平垂直居中

  如何讓一個元素同時水平垂直居中？答案不少樣也很複雜，可是在這麼多樣化得答案中flex絕對是最簡單的一種了~

圖6 水平垂直居中

示例代碼

  html代碼：

<div class="container"> <div class="inner">我是中間的內容</div> </div> 

  css代碼：

.container{
  height:300px;
  width:300px;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.inner{
  border:1px solid black;
}

應用的flex屬性

1. justify-content:center;使item元素水平居中
2. align-items:center;使item元素垂直居中

  這麼多場景都難不倒flex有木有，果真名不虛傳~(  想更詳細的瞭解flex相關屬性的話，請戳flex入門—瞭解這些flex屬性~)