定義display:flex或inline-flex開啟子元素的Flex布局。

.container{
  display: flex;
  //行內元素使用 display: inline-flex;
}

設置display: flex后，其子元素的float、clear、vertical-align屬性將會失效。

容器總共有6個屬性可以定義。
第一個：flex-direction，這個屬性表示子項目的排列規(guī)則，有4個屬性值。

.container{
  flex-direction: row; // 默認值，從左至右排列
}

.container{
  flex-direction: row-reverse; // 從右至左排列
}

.container{
  flex-direction: column; // 從上至下排列
}

.container{
  flex-direction: column-reverse; // 從下至上排列
}

第二個：flex-wrap，這個屬性表示子項目是否換行，有3個屬性值。

.container{
  flex-wrap: nowrap; // 默認值，不換行，即使定義了子項目的寬度，也會自動壓縮
}

.container{
  flex-wrap: wrap; // 換行
}

.container{
  flex-wrap: wrap-reverse; // 換行，且行的排列倒敘
}

第三個：flex-flow，這個屬性是flex-direction和flex-wrap的簡寫形式，語法為：

.container{
  flex-flow: (flex-direction) || (flex-wrap)
}

第四個：justify-content，這個屬性表示子項目的對齊方式，有5個屬性值

.container{
  justify-content: flex-start // 默認值，flex-direction方向相同對齊
}

.container{
  justify-content: flex-end // flex-direction方向相反對齊
}

.container{
  justify-content: center // flex-direction方向居中對齊
}

.container{
  justify-content: space-between // flex-direction方向兩端對齊
}

.container{
  justify-content: space-around // 每個項目的左右間隔相等對齊，會導致項目之間的距離比項目和邊框之間的距離大一倍
}

第五個：align-items，這個屬性在當前flex-direction方向的垂直方向上的對齊方式，有5個屬性值。

.container{
  align-items: flex-start // 與當前flex-direction方向的垂線方向同向對齊
}

.container{
  align-items: flex-end // 與當前flex-direction方向的垂線方向反向對齊
}

.container{
  align-items: center // 與當前flex-direction方向的垂線方向居中對齊
}

.container{
  align-items: baseline // 與子項目的第一行文字的基線對齊
}

.container{
  align-items: stretch // 默認值，當子項目沒有設置flex-direction方向上的大小值時，會自動填滿容器在flex-direction方向上可用容量

flex-direction為row時：

flex-direction為column時：

.container{
  align-content: flex-start; // 與當前flex-direction方向的垂線方向同向對齊
}

.container{
  align-content: flex-end; // 與當前flex-direction方向的垂線方向反向對齊
}

.container{
  align-content: center; // 與當前flex-direction方向的垂線方向居中對齊
}

image.png

.container{
  align-content: space-between; // 與當前flex-direction方向的垂線方向兩端對齊
}

.container{
  align-content: space-between; // 每個flex-direction方向的垂線方向兩端的距離相等，所以flex-direction方向的垂線方向之間的距離為其與邊框距離的兩倍
}

.container{
  align-content: stretch; // 默認值，所有flex-direction方向會將整個容器均勻填滿
}

子項目總共有6個屬性可以定義。
第一個：order，表示子項目的排列順序，數(shù)值越小排名越靠前，值為整數(shù)，默認值為0，可以取負值。

.item1{
  order: -2;
}

第二個：flex-grow，表示子項目根據(jù)剩余空間的放大比例，默認值為0，即表示即使有剩余空間，也不放大。

// 當所有項目的flex-grow都為1時，它們將平分剩余空間。
.container div{
  flex-grow: 1;
}
// 當有一個項目的flex-grow為2時，表示它得到的剩余空間為其他項目的2倍。
.container div.item4{
  flex-grow: 2
}

第三個：flex-shrink，表示子項目根據(jù)剩余空間大小的縮小比例，默認值為1，即表示剩余空間不足時，該項目會縮小。不能使用負值。

// 當某個項目的flex-shrink為0，而其他項目都為1時，表示該項目不會縮小其他項目縮小。
.container div.item4{
  flex-shrink: 0
}

第四個：flex-basis，表示在分配當前flex-direction方向上的多余空間之前，這個項目要占據(jù)多少空間。瀏覽器會根據(jù)這個屬性來計算當前flex-direction方向上是否有多余的空間。默認值為auto。即使用項目本身的大小，設置了width(或height，根據(jù)flex-direction方向決定)時，會使用width值，沒有設置時，會使用項目的內容大小。

flex-basis并不能保證項目的實際大小，當當前flex-direction方向上的剩余空間不足時，項目仍然會被壓縮，flex-basis表示的是一種理想的大小，可以看成是項目還未放入容器時應該表現(xiàn)出的大小。最大最小值屬性(min-width,max-width,min-height,max-height)仍然可以限制flex-basis的值。

flex-basis指定的值是根據(jù)box-sizing的類型來指定的。

// 由于容器剩余大小無法滿足給定的值，所有項目會按照其flex-basis的值等比例縮放。
.container div.item1{
  flex-basis: 1000px
}
.container div.item2{
  flex-basis: 2000px
}
.container div.item3{
  flex-basis: 3000px
}
.container div.item4{
  flex-basis: 4000px
}

第五個：flex，這個屬性是flex-grow，flex-shrink，flex-basis這3個屬性的簡寫形式，語法為：

.item{
  flex: (flex-grow) || (flex-shrink) || (flex-basis)
}

該屬性的默認值是flex: 0 1 auto，有兩個關鍵字值，none和auto。

.item{
  flex: none; // 表示 flex: 0 0 auto，即表示不放大，不縮放
}
.item{
  flex: auto; // 表示 flex: 1 1 auto，即表示放大，縮放
}

flex還有以下特殊情況：

flex: 0; // 值為0時，表示flex: 0 1 0，即直接以內容寬度顯示。
flex: 0% // 值為一個百分值時，表示flex-basis的值，此時flex-grow值為1，flex-shrink值為1，表示flex: 1 1 0%，即放大，縮放。
flex: 1px // 值為一個帶單位的大小值時，與百分值相同。
flex: 1; // 值為一個大于0的數(shù)字時，表示flex-grow的值，此時flex-shrink值為1，flex-basis值為0%，即flex: 1 1 0%，即放大，縮放。
flex: 1 2; // 值為兩個大于0的數(shù)字時，表示flex-grow和flex-shrink的值，此時flex-basis值為0%，即flex: 1 2 0%，即放大，縮放。
flex: 1 0; // 值為大于0的數(shù)字和0時，表示flex: 1 1 0，即放大，縮放。
flex: 0 1; // 值為0和大于0的數(shù)字時，表示flex: 0 1 0，即直接以內容寬度顯示。
flex: 0 30px; // 值為非負數(shù)字(0和正數(shù))和一個帶單位的大小值時(無論先后順序)，表示flex-grow和flex-basis的值，表示flex: 0 1 30px

第六個：align-self，該屬性表示單個項目的對齊方式，屬性值與容器元素的align-item完全相同，默認值為auto，與父元素表現(xiàn)一致。

flex各個屬性中具有方向性的屬性都依賴flex-direction的方向和flex-direction方向的數(shù)量(flex-wrap換行會產生多個相同的flex-direction方向)，時刻要注意當前flex-direction的方向。