前言

前面我們已經分享過一篇 移動Web開發基礎-百分比+flex佈局方案 只是大概講了下這種佈局適配方案的思路，後面我們也通過分享 移動Web開發基礎-比例盒子 讓大家對百分比佈局中比較常用的等比縮放有了比較好的處理方法，本文我們來了解下flex彈性佈局，並重點了解移動端web頁面中flex彈性佈局的相容寫法。

flex初認識

Flex 是 Flexible Box 的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 佈局。

.box{
  display: flex;
}
.box{
  display: inline-flex
 
;
}

因為彈性佈局提出來的時間還是比較早的，到今天這個離2018年還有一個月的時間點上，我就暫且認為大家或多或少多flex佈局有一定的認識吧，因為作為一個寫CSS的同學，flex帶來的佈局方便性還是很大的，所以這裡就簡單介紹下，具體詳細的屬性可以學習大漠老師的這篇文章——Flexbox——快速佈局神器。

flex理解

說下我對於flex的理解，就下面幾點。

一、兩種元素display: flex;
採用 Flex 佈局的元素，稱為 Flex 容器（設定display），它的所有子元素自動成為容器成員，稱為 Flex 專案，簡稱“專案”。

二、設定主軸
1.設定主軸方向：flex-direction: row/column;

2.主軸方向富裕空間管理，是指專案之間的空間的管理

justify-content: flex-start/flex-end/center/space-between/space-around;

三、設定側軸
設定好了主軸方向，就知道了主軸，與主軸垂直的即為側軸，側軸設定的專案排列方向，就是側軸方向。
側軸方向富裕空間管理：

align-items:  flex-start/flex-end/center/baseline;

四、其他屬性設定
比如設定專案的排列順序，專案的寬度等。
可以通過設定專案排列順序，調整專案的位置，專案的寬度很常見的就是定寬元素和自適應元素的配合，只需要設定自適應的那個專案flex：1

.flex--flex-order {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2
}
.flex--flex-grow-all > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

flex相容

大家可能知道，flex是有好幾個版本的，早期的flex寫法是-webkit-box;，而且屬性的差異比較大，大家可以先感受下定義一個容器的寫法

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

設定主軸空間平均分配

.flex--justify-content--space-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

可以看到寫法還是比較繁雜和差異大的，所以接下來我們就來看下flex的相容寫法，這裡我先建議大家閱讀大漠老師的文章 使用Flexbox：新舊語法混用實現最佳瀏覽器相容。

最理想的辦法是寫一個瀏覽器外掛，用外掛設定好我們的佈局之後生成相容程式碼直接拷貝，感覺會比較爽，不知道有沒有這種東西呢，好像之前有看過同學開發。

補充20180105

最近把上面說到的這個想法實現了，用vue寫了一個Chrome瀏覽器外掛，大家可以先預覽一下，原始碼我已經開源到github上了，雖然不一定有人會去用。如果你希望用上它的話，可以到GitHub上下載下來，要是能順手給個star就非常感謝了。https://github.com/xiangshuo1992/play-flexbox

補充完！有了這個外掛，後面的這些話可以當笑話看了。

說下我的辦法是，我把常用的這些佈局寫法寫在一個txt檔案裡，然後用到flex佈局的時候就拷貝出來，當然，如果是移動端頁面，flex相容寫法裡面可以去掉moz和ms字首的寫法了。

當然這也是在沒有構建工具開發的情況下，我們也可以通過構建工具把這些相容寫法補全。

大家也可以直接拷貝如下程式碼：

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex.flex--reverse {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex--row {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex--row.flex--reverse {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.flex--justify-content--space-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex--justify-content--space-around {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.flex--justify-content--center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex--justify-content--start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.flex--justify-content--end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.flex--align-items--start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.flex--align-items--end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.flex--align-items--center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex--align-items--baseline {
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

.flex--align-items--stretch {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

/*.flex--flex-order {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2
}*/
.flex--flex-grow-all > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
}
.flex--flex-grow-last :last-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
}

.flex--flex-grow-middle :nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
}

.flex-center-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}