display: flex屬性介紹

參考文章：　

阮大神的：Flexbox 佈局的最簡單表單（主要講解項目item上的屬性）

另外一位大神的：佈局神器display:flex（總體講解的很是詳細）

　　

以前沒有仔細看flex佈局（彈性佈局），設置子元素垂直居中都是經過css樣式設置的，最近看了flex的佈局方式，感受太好用了，比之前些樣式還省了許多的代碼，這裏把大神們的內容總結一下，就當練習打字給本身作個筆記加深印象好了

 

（1）彈性佈局是一種靈活、響應式的佈局方式，目前的主流瀏覽器Chrome21+、Opear12.1+、Firefox22+、Safari6.1+、IE10+都已支持，能夠放心使用

（2）彈性佈局的使用-彈性佈局設置的元素爲父元素，其下的因此子元素稱爲項目（item），以下，div是父元素，div下面的input和button則稱爲項目

<div>
    <input placeholder="隨便輸入點什麼"></input>
    <button>發送</button>
</div>

若是沒有給父元素div設置彈性佈局，在瀏覽器上打開能夠看到input跟button之間存在空白間隔，以下：

而後咱們給div設置彈性佈局屬性display:flex，發現input跟button之間的空白間隙消失了，以下：

這是由於彈性佈局下，全部的項目（item）之間默認沒有間隔，而且有個特別的地方，就是不給項目設置高度的狀況下，全部項目跟父元素等高

（3）設置在父元素上的屬性有：flex-direction、flex-wrap、flex-flow、justify-content、align-item、align-content六種

<div class="test">
      <input type="text" placeholder="隨便輸入點什麼吧" />
      <button>send</button>
      <div class="hello-world">item1</div>
      <div class="hello-world">item2</div>
      <div class="hello-world">item3</div>
</div>

.test {
    width: 500px;
    height: 100px;
    display: flex;
    border: 1px solid red;
    box-sizing: border-box;
    /* justify-content: start; */
    /* flex-direction: column; */
    /* align-items: center; */
}
.hello-world {
    border: 1px solid blue;
}

 

① 項目在父元素下的排列方式屬性 flex-direction：row | row-reverse | column | column-reverse

row --- 默認值，項目橫向排列，第一個項目從父元素的最左邊邊線開始向右進行排列

row-reverse --- 項目橫向排列，第一個項目從父元素的最右邊邊線開始向左排列，以下：

column --- 項目縱向排列，第一個項目從父元素的頂部邊線開始自上而下進行排列

column-reverse --- 項目縱向排列，第一個項目從父元素的底部邊線開始自下而上進行排列

 

② 項目換行狀況flex-wrap：nowrap | wrap | wrap-reverse

<div class="test">
      <input type="text" placeholder="隨便輸入點什麼吧" />
      <button>send</button>
      <div class="hello-world">item1</div>
      <div class="hello-world">item2</div>
      <div class="hello-world">item3</div>
      <div class="hello-world">item4</div>
      <div class="hello-world">item5</div>
      <div class="hello-world">item6</div>
      <div class="hello-world">item7</div>
      <div class="hello-world">item8</div>
      <div class="hello-world">item9</div>
</div>

 

nowrap --- 默認值，不換行，全部項目都在一行展現，空間不足時，會撐破父元素寬度

wrap --- 可換行，排不下的項目在下一行展現，排滿的在第一行展現

wrap-reverse --- 可換行，多出來的項目展現在第一行，排滿的在後面展現

 

 

③ flex-flow：即flex-direction和flex-wrap屬性的縮寫，默認值爲row nowrap，樣式寫法以下：

.test {
  flex-flow: row nowrap;
}

 

④ 項目在父元素中水平方向上的對齊方式屬性 justify-content：flex-start | flex-end | center | space-between | space-around

flex-start --- 默認項目在父元素中靠左對齊，項目之間沒有間隔

flex-end --- 靠右對齊，項目之間沒有間隔

center --- 居中對齊，項目之間沒有間隔，且在父元素中處於居中位置

space-between --- 兩端對齊，最靠邊的項目跟左右邊線沒有間隔，同一行上的全部項目間隔相等

space-around --- 居中對齊，兩側間隔相等，且同一行上的項目之間的間隔是兩側間隔的2倍

 

// 注意：設置項目水平方向上的對齊方式時，此時的項目高度是父元素高度除以項目的總行數，且上下行之間沒有間隔

 

⑤ 項目在父元素中縱向上的對齊方式align-items：flex-start | flex-end | center | baseline | stretch

stretch --- 默認對齊方式，若是項目未設置高度或高度爲auto，那麼項目高度值則爲：父元素高度除以項目行數，上下行項目之間沒有間隔

flex-start --- 頂部對齊，項目高度自適應，上下行項目之間有間隔

flex-end --- 底部對齊，項目高度自適應，上下行項目之間有間隔

center --- 居中對齊，項目高度自適應，，上下行項目之間有間隔，項目距離父元素頂部和底部的間隔相同

baseline --- 項目第一行的文字基準線對齊，項目高度自適應

 

⑥ 定義多行項目時的對齊方式align-content：flex-start | flex-end | center | space-between | space-around | stretch

注意：若是項目只有一行時，不能使用此屬性，只能設置flex-wrap屬性

flex-start --- 垂直方向上頂部對齊

flex-end：--- 垂直方向上底部對齊

center --- 多行項目在父元素的垂直方向上居中對齊，

space-bewtne --- 在父元素的上下兩端對齊排列，每個項目行之間的間隙是相等的

space-around --- 多行項目父元素的上下兩側排列，上下最外側的項目與邊線之間有間隔，且非兩側的項目間隔是最外側項目與父元素邊線間隔的兩倍

stretch --- 默認值，多行的項目佔據整個父元素高度，且每一行之間沒有間隔，當未設置項目高度時，同行的項目的高度即最高項目項的高度除以項目的行數

 

（4）項目的屬性有：order、flex-grow、flex-shrink、flex-basis、flex、align-self

<div class="test2">
      <div class="mybox">1</div>
      <div class="mybox">2</div>
      <div class="mybox">3</div>
      <div class="mybox">4</div>
      <div class="mybox">5</div>
      <div class="mybox">6</div>
      <div class="mybox">7</div>
</div>

.test2 {
  width: 500px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  border: 1px solid blue;
  box-sizing: border-box;
  align-items: center;
  margin-top: 200px;
}
.mybox {
  border: 1px solid red;
}

項目未設置屬性時的排列：

① order：定義項目的排列順序，數值越小，排列越靠前，數值能夠爲負數

② flex-grow：項目的放大比例，默認值爲0（既不放大，也不縮小），好比一行有兩個項目，其中某一個項目的flex-grow屬性爲0，另一個設置爲1，則flex-grow：0的寬度不變，flex-grow屬性的項目佔據剩餘寬度；若項目的flex-grow屬性都相等，則平分這一行的空間

③ flex-shrink：項目的縮小比例，默認值爲1，且不能爲負數；當同一行中所其餘項目爲1，一個項目的flex-shrink屬性爲0時，當空間不足時，flex-shrink爲0的項不縮小，其餘項目會縮小，若全部項目的flex-shrink都爲0，那麼空間不足時，會撐破父元素

④ flex-basis：爲項目分配指定大小的空間，好比給其中一個項目設置flex-basis：350px，則這個項目在空間充足的狀況下，其寬度爲350px，當空間不足時，實際該項目的寬度值會小於設置的值

空間足夠時：

空間不足時：

⑤ flex：flex屬性是flex-graw、flex-shrink、flex-basis三個屬性結合，默認值爲 0 1 auto，第一個屬性是必須的，後兩個屬性可選

⑥ align-self：容許設置單個項目對齊方式，可設置值有auto、flex-start、flex-end、center、baseline、stretch，由於這個屬性是繼承與父元素的align-items屬性，假如全部項目是統一對齊樣式，則直接在父元素上進行設置align-items屬性便可，若是有的項目的對齊方式不同，可針對這個項目使用align-self進行設置，用法跟align-items屬性同樣

 

最後說一下flex彈性佈局的優缺點吧，優勢是佈局容易上手，比較容易使用，缺點是：對IE10如下的瀏覽器仍是沒能兼容到，其餘瀏覽器卻是兼容的比較好了。。。