Flex佈局入門

簡介

首先先聊一聊Flex佈局是什麼？Flex佈局表面上相似於塊佈局，可是它缺乏許多能夠在塊佈局中使用的更復雜的文本或文檔中心屬性，如浮動和列，與此同時，它也得到了一些簡單而強大的佈局工具，它能夠自動調整，計算元素在容器空間的大小

重要概念

Flex容器：父元素顯示地設置display:flex.
Flex項目：Flex容器內的子項目

Flex容器中默認存在一根水平的主軸（main axis）和豎直的交叉軸（cross axis），主軸開始的位置叫main start，結束位置叫main end，交叉軸開始的位置cross start結束的位置叫cross end，Flex容器中的項目將會沿着主軸或者交叉軸排布。比較重要的幾個概念介紹完，下面將會結合代碼介紹對應的屬性

Flex容器屬性

容器屬性主要有一下六個：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

此屬性決定了主軸的排布方向，能夠取四個值：

• row(默認值)：主軸沿水平方向從左至右排列
• row-reverse：主軸沿水平方向從右至左排列
• column：主軸沿垂直方向從上至下排列
• column-reverse：主軸沿垂直方向從下至上排列

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container{
  display: flex;
  flex-direction: row;
}
.item{
  flex: 1;
  margin: 10px;
  background-color: #ccc;
}

當flex-direction爲row(默認值)時：

當flex-direction爲column(默認值)時：

flex-wrap

此屬性決定了是否換行,可取三個值

• nowrap(默認值)：不換行
• wrap：換行，第一行在上方
• wrap-reverse：換行，第一行在下方

.container{
  display: flex;
  flex-wrap: nowrap;
  width: 400px;
}
.item{
  width: 200px;
  margin: 10px;
  background-color: #ccc;
}

當flex-wrap屬性值取默認的nowrap時，容器下面元素不會換行，且若是容器項目的寬度和超過容器，則容易項目寬度將會按照比例縮小

當flex-wrap屬性值取默認的wrap時，容器下面元素超過容器寬度就會換行顯示

flex-flow

flex-flow屬性是flex-direction和flex-wrap屬性的簡寫，默認是 row nowrap

justify-content

此屬性定義了主軸上的項目對齊方式，可取五個值：

• flex-start(默認值)：左對齊
• flex-end：右對齊
• center：水平居中
• space-between：兩端對齊
• space-around：項目兩側間距相等

.container{
  display: flex;
  justify-content: flex-start;
}

當justify-content爲flex-start時，主軸上的項目將靠左對齊

當justify-content爲flex-end時，主軸上的項目將靠右對齊

當justify-content爲flex-end時，主軸上的項目將居中對齊

當justify-content爲space-between時，主軸上的項目將兩端對齊，且項目之間的間距相等

當justify-content爲space-around時，項目兩側間距相等，項目之間的間距是側邊間距兩倍

align-items

align-items控制項目在豎直交叉軸上的對齊方式，可取五個值

• flex-start：交叉軸起點對齊，即上對齊
• flex-end：交叉軸終點對齊，即下對齊
• center：交叉軸中間對齊，即豎直居中
• baseline：沿基線對齊，基線與其交叉起始邊距邊緣之間最大距離的項目被放置在該行的交叉起始邊緣上（即基線以距離交叉軸距離最遠的項目下邊界爲準）若是該項在必需的軸沒有基線，則從Flex項目的邊框中合成一個基線。
• stretch(默認值)：默認值，若項目沒有設置高度時，項目高度會拉伸到預容器高度一致，存在高度設置，以設置屬性爲準

.container{
  display: flex;
  height: 400px;
  align-items: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 0 10px;
  background-color: #ccc;
}

align-items取值爲flex-start時，靠頂端對齊

align-items取值爲flex-end時，靠底端對齊

align-items取值爲flex-center時，豎直居中對齊

.container{
  display: flex;
  height: 400px;
  align-items: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 0 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  height: 100px;
  line-height: 100px;
}

align-items取值爲baseline時，基線對齊

align-content

此屬性用於多行排列的Flex容器，對單行容器不起做用，排列效果和align-items同樣，可是沒有baseline屬性，屬性取值：

• flex-start：交叉軸起點對齊，即上對齊
• flex-end：交叉軸終點對齊，即下對齊
• center：交叉軸中間對齊，即豎直居中
• stretch(默認值)：項目高度與容器高度同樣
• space-between：兩端對齊
• space-around：項目兩側間距相等

.container{
  display: flex;
  height: 800px;
  width: 400px;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

這是align-content取值爲flex-start時，因爲取值和align-item表現一致，所以再也不舉例其餘屬性

項目屬性

order

此屬性能夠定義項目的排列順序，數值越小的項目越靠前，默認值爲0

.container{
  display: flex;
  height: 400px;
  align-content: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  order: 2;
}
.item:nth-child(2) {
  order: 1;
}
.item:nth-child(3) {
  order: -1;
}

flex-grow和flex-shrink

這兩個屬性體現Flex佈局的靈活性，它們定義了容器中項目的放大和縮小，flex-grow的默認值爲0，即默認狀況即便有剩餘空間也不會自動放大，flex-shrink默認值爲1，即在空間不足的狀況下，容器項目會自動縮小

.container{
  display: flex;
  width: 1000px;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

默認狀況下容器寬度比項目寬度大時，flex-grow默認值爲0時，項目不會自動拉伸

當將flex-grow的值設置爲1時，項目將會自動拉伸佔滿剩餘空間

.item:nth-child(1) {
 flex-grow: 2;
}

如圖所示當將容器的第一個項目flex-grow設爲2時，其餘項目flex-grow爲1時，容器的剩餘空間會按照flex-grow的比例將剩餘的空間分配給各個項目

.container{
  display: flex;
  width: 500px;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

當flex-shrink的值爲默認1時，能夠看到容器的項目寬度和比容器寬度要大時，會自動進行縮小，當手動設置flex-shrink爲0時，將不會進行縮小，以下圖

flex-basis

此屬性設置項目佔據主軸的空間，當不設置值時，默認爲auto，即項目原本的大小，也能夠手動設置佔據主軸的空間大小

.container{
      display: flex;
      width: 500px;
      border: 1px solid #000;
    }
    .item{
      width: 100px;
      height: 200px;
      margin: 10px;
      background-color: #ccc;
    }
    .item:nth-child(1) {
      flex-basis: 150px;
    }

flex簡寫

flex屬性是flex-grow、flex-shrink、flex-basis的簡寫形式，默認值是0 1 auto，該屬性有兩個快捷值，auto(1 1 auto)，none(0 0 auto)

align-self

此屬性定義了單個項目的對齊方式，取值和表現和align-items基本一致，多了一個值auto即默認值，表示繼承容器的align-items屬性，取值auto | flex-start | flex-end | center | baseline | stretch

.container{
  display: flex;
  width: 500px;
  border: 1px solid #000;
}
.item{
  width: 100px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  height: 100px;
  align-self: center;
}

此處就舉了align-self: center時的例子，其他表現和align-items表現一致，只不過align-self做用在單個項目上