【前端工程師手冊】關於flexbox的why、what和how

時間 2019-11-06

原文原文鏈接

why——爲何使用flex

長久以來，網頁佈局是一個比較難搞的地方，各類前端前輩嘔心瀝血總結了各類奇淫巧技，好比利用float和position來實現居中、兩欄、三欄等等佈局。然而css並不存在一個官方的佈局方案，終於一種新的佈局方案就出現了。css

what——什麼是flex

flex便是彈性盒子佈局，既然有彈性那麼就說明它是能夠達到自適應的目的的。
根據個人理解，flex佈局主要有兩部分須要注意，採用flex佈局的元素叫作flex容器元素，flex容器元素內部的元素叫作子元素。flex佈局的全部屬性也能夠分爲兩類，一部分是做用在容器元素，一部分做用在子元素。
前端

借用一張MDN的圖，首先flex佈局是二維的，就像平面直角座標系同樣會有X軸和Y軸，因此如圖設置了display:flex的容器元素默認有橫向的主軸（main axis）和縱向的交叉軸（cross axis），固然了也能夠設置爲主軸爲縱向交叉軸爲橫向。
和主軸和交叉軸相關的還有main size和cross size，main size便是單個子元素佔主軸的空間，cross size便是單個子元素佔交叉軸的空間。web

how——如何使用flex

首先梳理一下，將屬性分爲兩類：
做用在容器元素上的有7個：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、place-content，其實容器元素上還有一個設置display:flex/inline-flex的屬性
做用在子元素上的有6個：align-self、order、flex-grow、flex-shrink、flex-basis、flex
ps：當時設置 flex 佈局以後，子元素的 float、clear、vertical-align 的屬性將會失效。瀏覽器

容器元素屬性

display: flex | inline-flex
設置flex生成一個塊級的容器元素；inline-flex生成一個行級的容器元素
app

flex-direction: row | row-reverse | column | column-reverse
設置主軸的方向，會影響子元素在主軸的排列方向，默認是row
框架

flex-wrap: nowrap | wrap | wrap-reverse
主軸尺寸固定時，子元素排列不下時，是否要換行
佈局

flex-flow: flex-direction 和 flex-wrap 的簡寫形式（沒什麼好說的flex

align-items: flex-start | flex-end | center | baseline | stretch
決定了子元素在交叉軸上如何對齊

spa

place-content：是align-content和justify-content的縮寫

子元素屬性

order：子元素在容器元素中排列的順序，數值越小排列越靠前，默認爲0，能夠取負值

flex-basis：auto | <length>
flex-shrink：<number>
flex-grow：<number>
這三個屬性放在一塊兒說，
flex-grow定義了容器元素有剩餘空間時，子元素是否會放大以及如何放大，默認爲0即不放大；若是全部子元素的flex-grow都是1，則在剩餘空間中，全部子元素都取一份來放大；若是某子元素的flex-grow是2，則此子元素在剩餘框架中取2份來放大。
flex-shrink定義了容器元素空間不足時，子元素是否會縮小以及如何縮小，默認爲1即會縮小；若是全部子元素的flex-shrink都是0，則空間不夠時不縮小；若是全部子元素的flex-shrink都是1，則空間不足時，全部子元素縮小相同的比例；若是某子元素的flex-shrink是2，則該子元素縮小的比例是其餘子元素的2倍。
flex-basis定義了在分配多餘空間以前，子元素佔據的主軸空間，瀏覽器會根據這個來計算剩餘空間，也就是說設置了flex-basis的子元素會覆蓋掉原來設置的尺寸大小；默認值爲auto，即子元素本來的大小。

flex：flex-grow, flex-shrink 和 flex-basis的簡寫