CSS—flex佈局、經常使用水平垂直居中

今天正好複習到flex佈局，因爲flex彈性盒佈局在咱們前端開發中尤其重要因此拿出來單獨總結一下，順便講一下常見的幾種居中方式

1、flex佈局的特色

1. flex佈局即爲彈性佈局，可使元素具備伸縮性，根據父容器的大小，來決定收縮仍是擴展。設爲flex佈局之後，子元素的float、clear和vertical-align屬性將失效。
2. 來對比一下，有和沒有flex佈局的區別

<style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .flexBox {
      /* display: flex; */
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: aqua;
    }

    .item {
      height: 100px;
      width: 100px;
      border: 1px solid black;
      background-color: rgb(116, 226, 42);
    }
  </style>
  <div class="flexBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
複製代碼

這是沒加flex佈局時的子元素排列狀況↓

很顯然，子盒子都爲塊級元素被排在不一樣行上，若是想要讓他們排在一行，用以往的方式是使用float讓他們浮動起來↓

.item {
      float: left;//添加浮動
      height: 100px;
      width: 100px;
      border: 1px solid black;
      background-color: rgb(116, 226, 42);
    }
複製代碼

不過因爲父盒子的寬度限制，不能所有排滿。接下來咱們就來試試flex佈局↓

.flexBox {
      display: flex;//給父容器添加flex盒子模型
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: aqua;
    }
複製代碼

如今是否是都排在一行了，不過因爲是彈性佈局，強制排在一行下，那確定是要收縮了，若是設置能夠換行排列呢？

.flexBox {
      display: flex;
      flex-wrap: wrap;//容許換行排列
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: aqua;
    }
複製代碼

是否是發現和float同樣的效果，不過要是用float讓他們都排在一行上那是否是很麻煩呢。可見flex能夠給咱們更多的佈局方式。接下來讓咱們學習一下flex吧！

2、flex父容器屬性

1. display: flex設置爲flex盒子模型，在父容器下設置這個，此時在父容器下的全部元素都具備彈性，也就是能夠伸縮了。

從這張圖能夠看出子盒子的實際總寬度之和爲300px，而父盒子只有200px，何況flex盒子模型默認是不會換行排列的，因此子元素就都收縮了。

2. flex-direction: row此屬性設置flex佈局中主軸方向(子元素的排列方向)，默認row即從左到右，還有row-reverse從右到左，column從上到下，column-reverse從下到上,提及flex佈局中有2個軸，元素就是依靠這2個軸進行對齊，一個是主軸，也就是子元素的排列方向，默認row即爲水平軸。

默認從左到右排序。如今把主軸方向改成row-reverse即爲水平從右到左排列↓

如今子元素調了一個頭開始排序。接下來使用column試試↓

先無論它收縮，如今看了主軸變爲了從上到下的方向。同理 column-reverse也同樣↓

記住咯，flex-direction設置的是flex佈局中子元素的主軸方向，也就是那4個：左右，右左，上下，下上。這些都是影響子元素的開始排列方向，還有一點先說下，側軸(副軸)是永遠垂直於主軸的。

3. flex-wrap: nowrap這個屬性上面也接觸過了，也就是設置flex佈局中子元素的換行狀況，默認nowrap是不換行若是空間夠好說，空間不夠就要擠壓元素了。可選值爲：nowrap不換行，wrap可換行，wrap-reverse換行且反轉。先試試wrap於nowrap區別↓

可見是否是很容易區分。在看看 wrap-reverse是怎麼回事↓

？是否是超出預料了呢，沒錯 wrap-reverse就是新行的位置變了，變成了上面，通常咱們寫字，新行都在下面，而這個反轉，就把新行寫在了上方。

4. flex-flow: row nowrap這是一個複合屬性，也就是把flex-direction和flex-wrap合併在一個屬性上。這個屬性能夠同時設置flex的主軸方向和換行方式。也能夠分開單獨設置。
5. justify-content: flex-start這是屬性設置的是主軸的對齊方式，以前沒有設置對齊方式就是一個挨着一個排列，看圖最容易明白。

這種對齊方式差很少就這些了。這種都是在主軸爲水平軸的狀況下，若是把主軸設置爲垂直軸呢？

也是同樣，只是把軸立起來，而後再對齊，其餘都差很少，這裏就不一一試了

6. align-items:stretch此屬性設置flex佈局下單行時的側軸對齊狀況。

7. align-content:stretch設置flex佈局中多行時的側軸對齊狀況，把每一行看做一個元素進行對齊，與justify-content相似。

這個佈局與justify-content相似，只是把每行看做元素進行佈局，並且只適用於多行狀況下，單行就用align-items。

3、flex子元素屬性

1. flex:0 1 auto這是一個複合屬性，能夠同時設置flex-grow、flex-shrink、flex-basis，分別爲子元素擴展比例、收縮比例、基礎比例。接下來依次講解
2. flex-grow:0設置子元素的擴展比例默認0，不容許負值。說白了就是當設置了擴展比例以後，若是父元素還有剩餘空間，則這部分空間由全部設置擴展比例的子元素按比例分配。

沒設置擴展比例以前各子元素不會分配剩餘空間。接下來我設置每一個元素flex-grow:1看看效果

讓我來解釋一下，這是如何計算的：剛開始沒設置flex-grow時，默認是0，即元素不分配父元素剩餘空間，因此每一個元素就佔有本身寬度的空間。後來設置flow-grow:1後，每一個元素都有了擴展屬性，一開始父元素剩餘400-100-100=200的空間，這部分空間由具備擴展屬性的子元素按擴展比例分配：每一個元素得到：(400-100-100)*(1/(1+1))=100的額外空間，因此如今每一個元素有200的寬度。接下來我分別設置元素1的flow-grow：1,元素2的flow-grow：3看看效果

如今看出來了嗎？元素1得到額外空間：(400-100-100)*(1/(1+3))=50,總寬度100+50=150， 元素2得到額外寬度：(400-100-100)*(3/(1+3))=150，總寬度=100+150=250。總結一句話，若是父元素有剩餘空間，則子元素依據設置的擴展比例分配這些額外的空間。

3. flew-shrink:1設置子元素的收縮比例，默認爲1，不容許負。如今知道爲何，空間不足的時候子元素會默認收縮嗎，由於有默認收縮比例，而擴展比例默認爲0即不分配額外空間。

起始狀況，各元素默認200的寬度，父元素默認400的寬度恰好塞滿。如今把父元素寬度縮小到300看看效果。

能夠看出子元素按照默認收縮比例同等收縮了，看看是若是計算的吧：本來子元素總寬度爲：200+200=400，父元素300,超出100。此時父元素放不下了，要收縮子元素，每一個子元素各收縮：((200*1)/(200*1+200*1))*100=50。不難看出如何計算的，能夠這麼說：先求出子元素的全部寬度與收縮比例總和，再計算每一個元素佔全部子元素加權寬度和的比例，而後經過這個比例計算出應該分攤收縮多少寬度。接下來設置元素1的flex-shrink:1，元素2的flex-shrink:3看看效果

元素1收縮：((200*1)/(200*1+200*3))*100=25,收縮後：200-25=175，元素2收縮：((200*3)/(200*1+200*3))*100=75，總寬度：200-75=125

4. flex-basis:auto設置元素的基準伸縮比例，默認auto狀況下，元素的寬度由width或者內容決定。若是全部子元素的基準值之和大於剩餘空間，則會根據每項設置的基準值，按比率伸縮剩餘空間。

當基準值之和大於父元素的寬度時，按照基準值的比例收縮元素，元素1基準值200，寬度200，元素2基準值300，寬度200，父元素寬度400，因此子元素根據基準值的比例收縮。

5. align-self:auto設置子元素自身的側軸對齊方式，此屬性能夠單獨設置每一個子元素在側軸上的對齊。

沒什麼難的吧，就是單獨設置每一個元素側軸對齊

6. order:0設置每一個元素的排列順序，數值越小排在越前面，也就是按照給定優先級排列元素。

4、經常使用的幾種居中方式

1. margin:0 auto+text-align:center這個設置前提是父元素要有寬高，只設置元素的水平居中以及此元素的子元素水平居中。

   

   若是想讓子元素內的字水平垂直居中，則只須要在子元素設置line-height:子元素高度

2. 父元素設置display:flex+justify-content:center子元素自動水平居中，若是要垂直也居中則還要設置align-items:center或者align-content:center此時子元素都水平垂直居中

   

   若是單獨設置元素垂直居中能夠給子元素設置align-self:center，垂直軸爲主軸時也是同樣。

3. 父元素給個定位屬性和高寬，子元素設置position:absolute+left:50%+top:50%+transform:translate(-50%,-50%)，transform屬性能夠換成margin-left:-(子元素寬度一半)和margin-top:-(子元素高度一半)這樣就能水平垂直居中了

4. 父元素有定位和高寬，子元素設置position:absolute+margin:auto+top:0+left:0+right:0+bottom:0，這樣也能實現水平垂直居中了，過有些繁瑣就是了