前言

上回說到，移動端適配，推薦了，使用px爲主，vw,百分比爲輔助，再搭配flex的佈局方式，因而有人就開始問我了，這個flex搭配佈局應該怎麼用，梳理一遍，鞏固一下css

flex前世此生

在前端剛剛興起html,css,js，還停留在初級階段是的時候，前端工程化還不存在的時候，jqery還在統治江湖的時候，以及這張圖還在大火的時候，額！我又盜圖了html

我麼們想要實現兩個div一排顯示除了行內塊元素之外，只能用這讓人又愛又恨的float前端

float

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。 web

其實float的設計初衷僅僅是爲了實現：文字環繞效果，只不事後來在前端的迅速發展中，float被嘗試用來了佈局，因而，後來flaot就約定熟成的變成一種佈局屬性，雖然很好用，可是，既然設計初衷不是爲了佈局，那麼強行安上一個佈局的帽子，固然會有好多反作用！面試

反作用

一、當子元素都設置了浮動時，就會致使父元素的塌陷，即父元素撐不開，以下圖所示：

二、沒法實現動態實現自適應佈局，

舉個例子，若是想要實現二等分一排佈局，width要爲50%，可是若是忽然來個三等分呢，width設置50%顯然是已經不行了前端工程化

三、margin padding設置值不能正確顯示

因爲浮動致使父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。瀏覽器

四、若是前面的元素設置了浮動，那後面的元素就有可能產生異位的現象。

如圖所示，因爲元素1浮動了，脫離文檔流，致使元素2上去了安全

這些問題讓衆多開發這至關苦惱，尤爲是在相對複雜的項目，各類float會搞得頁面至關複雜（特別是移動端），出現很差解決的詭異bug，稍微欠點火候的web開發者，有可能被搞得暈頭轉向。bash

然後隨着移動互聯網興起，移動端的h5頁面鋪天蓋地，佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對移動端佈局很是不方便（引用阮老師）,因而flex橫空出世，終於，這個萬能的float終於要退出歷史舞臺了！markdown

flex初探

2009年，W3C 提出了一種新的方案----Flex(彈性盒模型) 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。

在2020的今天，flex因爲在移動端的自然兼容性，已經成爲佈局的首選方案，實現更改好的效果

flex究竟是個什麼東西

引用老羅名言，少廢話先看東西，其實就是給容器指定一個display屬性爲flex

//好比這樣之後div就具備彈性了
div{
    display:flex;
}
複製代碼

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。

flex有什麼屬性

flex 的屬性，容器上有，項目上一樣也有，且聽慢慢道來！

flex容器屬性

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

一、flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
//依次表示主軸爲水平方向，起點在左端。（默認）
//主軸爲水平方向，起點在右端。
//主軸爲垂直方向，起點在上沿。
//主軸爲垂直方向，起點在下沿。
複製代碼

二、flex-wrap屬性

默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
  //依次是不換行
  //換行，第一行在上方。
  //換行，第一行在下方。
}
複製代碼

三、flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
複製代碼

四、justify-content屬性（這個很重要，常常用）

justify-content屬性定義了項目在主軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  //依次是左對齊（默認值）
  //右對齊
  //居中
  //兩端對齊，項目之間的間隔都相等。
  //每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。
}
複製代碼

五、align-items屬性（這個也很重要。也經常使用）

align-items屬性定義項目在交叉軸上如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
  //依次是交叉軸的起點對齊。
  //交叉軸的終點對齊。
  //交叉軸的中點對齊。
  //項目的第一行文字的基線對齊。
  //若是項目未設置高度或設爲auto，將佔滿整個容器的高度（默認值）
}
複製代碼

六、align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  //依次是與交叉軸的起點對齊。
  //與交叉軸的終點對齊。
  //與交叉軸的中點對齊。
  //與交叉軸兩端對齊，軸線之間的間隔平均分佈。
  //每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
  //軸線佔滿整個交叉軸。（默認值）
}
複製代碼

項目的屬性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

一、order屬性

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

.item {
  order: <integer>;
}
複製代碼

二、flex-grow屬性（很重要）

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

.item {
  flex-grow: <number>; /* default 0 */
}
複製代碼

三、flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

注意：負值對該屬性無效。

.item {
  flex-shrink: <number>; /* default 1 */
}
複製代碼

四、flex-basis屬性（這個是重點，經常使用）

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

五、flex屬性（這個最重要）

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item {
//該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
//建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
複製代碼

align-self屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  //這個其實就是在項目裏用align-items 注：auto爲默認值
}
複製代碼

ok，阮大佬的文章算是抄完了（阮大佬的文章實在太好了，一激動就沒有本身寫，感謝大佬）

實戰

基礎的東西咱是抄完了，怎麼也得有點本身的東西啊，廢話少說，實戰開始

一、經常使用的flex 1究竟是啥意思？

上文說到。flex 是 flex-grow、flex-shrink、flex-basis的縮寫，那咋暈的忽的由來個1呢，其實他又以下規則(mdn上的至關難記請看這裏大佬們整理好的)：

一、當 flex 取值爲 none，則計算值爲 0 0 auto

//此處爲預處理語法
div{
diaplay:flex
 .div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}   
}

複製代碼

二、當 flex 取值爲 auto，則計算值爲 1 1 auto

//此處爲預處理語法
div{
diaplay:flex
 .div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}   
}

複製代碼

三、當 flex 取值爲一個非負數字，則 flex-grow 數字，flex-shrink 取 1，flex-basis 取 0%（最經常使用）

//此處爲預處理語法
div{
diaplay:flex
 .div {
    flex-grow: 1;//要取的值
    flex-shrink: 1;//默認
    flex-basis: 0%;//默認
}   
}

複製代碼

四、當 flex 取值爲一個長度或百分比，則視爲 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

//此處爲預處理語法
div{
diaplay:flex
 .div {
    flex-grow: 1;//默認
    flex-shrink: 1;//默認
    flex-basis: 0%;//要取得值
}   
}

複製代碼

當 flex 取值爲兩個非負數字，則分別視爲 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

//此處爲預處理語法
div{
diaplay:flex
 .div {
    flex-grow: 1;//要取的第一個值
    flex-shrink: 1;//要取的第二個值
    flex-basis: 0%;//默認
}   
}

複製代碼

當 flex 取值爲一個非負數字和一個長度或百分比，則分別視爲 flex-grow 和 flex-basis 的值，flex-shrink 取 1

div{
diaplay:flex
 .div {
    flex-grow: 1;//要取的第一個值
    flex-shrink: 1;//默認
    flex-basis: 0%;//要取的第二個值
}   
}
複製代碼

如何用flex實現等分佈局？

//css
   .box{
            height: 500px;
            display: flex;
        }
        .box div{
             height: 300px;
             border: 1px solid #000000;
                flex: 1;//這就是flex：1的妙用
                text-align: center;
            }
    //html
    div class="box">
        <div>等分效果</div>
        <div>等分效果</div>
    </div>
複製代碼

左邊固定右邊自適應

//css
   .box {
            height: 500px;
            display: flex;
        }

        .box div {
            height: 300px;


            text-align: center;
        }

        .box div.right {
            flex: 1;
            border: 1px solid #000000;
        }

        .box div.left {
            border: 1px solid #000000;
            flex-basis: 100px;
        }
    //html
    <div class="box">
        <div class="left">左邊固定效果</div>
        <div class="right">右邊自適應效果</div>
    </div>
複製代碼

垂直水平居中對齊

//css
 .box {
            width: 100%;
            height: 300px;
            border: 1px solid purple;
            display: flex;
            justify-content: center;
            align-items: center;
        }
//html
<div class="box"><p>看看劇中了嗎</p>
    </div>
複製代碼

有了以上三種基礎款，咱們即可以擴展出各類佈局

一、常見搜索框

//css
  .box {
            width: 100%;
            height: 50px;
            border: 1px solid purple;
            display: flex;
        }
        .input{
            flex:1;
            border:1px solid #000000
        }
        .bottom{
            flex-basis: 60px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
        }
    //html
     <div class="box">
        <div class="input"></div>
        <div class="bottom">搜索</div>
    </div>
複製代碼

二、自適應導航欄佈局

//css
 ul{
            display: flex;
            height: 50px;
            list-style: none;
            padding: 0;
        }
        li{
            flex:1;
            text-align: center;
        }
        .active{
           border-bottom: 1px solid rebeccapurple;
        }
    //html
    <ul>
       <li class="active">好好學習</li>
       <li>上學</li>
       <li>每天向上</li>
   </ul>
複製代碼

三、常見的左圖右文的list列表佈局

隨便寫的樣式有點醜，擔待

//css
 .box {
            display: flex;
            width: 100%;
            height: 150px;
        }

        .left {
            flex-basis: 100px;
            background: #000;
            color: #ffffff;
        }

        .right {
            flex: 1;
            position: relative;
            text-align: right;
        }

        .btn {
            border: 1px solid rebeccapurple;
            width: 100px;
            display: inline-block;
            overflow: hidden;
            margin-top: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    //html，
     <div class="box">
        <div class="left">表明是個圖</div>
          <div class="right">
                  <p>這個個大大的標題，</p>
                  <span>下邊的爛七八糟</span>
                  <div class="btn">搞個按鈕讓你點點</div>
              </div>
    </div>
複製代碼

這裏面有個坑，若是右邊自適應的內容若是超過範圍了，那麼就會造成以下效果,解決辦法也很簡單，在這個自適應的地方價格min-width：0,便可，可是具體爲啥，如今也沒有在官方文檔裏面找到（有知道的大佬，請告知）

四、柵格佈局

這個佈局有點小小的瑕疵，會有除不盡的狀況，可是無傷大雅，

//css
  ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            list-style: none;
            padding: 0;
        }

        li {
            flex: 0 0 33.333333%;
            height: 80px;
            box-sizing: border-box;
            border:1px solid #000
        }
    //html
     <ul>
        <li>
            方框
        </li>
        <li>
            方框
        </li>
        <li>
            方框
        </li>
        <li>
            方框
        </li>
        <li>
            方框
        </li>
        <li>
            方框
        </li>
        <li>
            方框
        </li>

    </ul>
複製代碼

五、底部固定，上部自適應

有人就會說了這個用定位來解決不久完事了，多一個選擇啊，對吧？也許就是這個選擇讓你驚豔面試官

//css
 .box {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header {
            flex: 1;

        }

        .footer {
            flex-basis: 100px;
            background: red;
        }
    //html
     <div class="box">
        <div class="header">
            這是頭部，
        </div>
        <div class="footer">
            這是底部
        </div>
    </div>
複製代碼

六、聖盃佈局，雙飛翼佈局

這種佈局，其實就是兩層的flex 在第一層佈局用了 flex-direction: column;而已，不在贅述

總結

乘着上期的文章還有熱乎勁頭，再來總結一些flex佈局，夯實我推薦的移動端適配的寫法基礎部分，借鑑阮一峯大佬：www.ruanyifeng.com/blog/2015/0…

做爲一個曾被移動端困擾的人，痛定思痛總結如上：願你們之後不被移動端佈局困擾。

上期移動端適配：面試官：你瞭解過移動端適配嗎？

flex深度剖析-解決移動端適配問題！

前言