前言：這個網站詳細講了水平、垂直、水平垂直的css方法。https://css-tricks.com/centering-css-complete-guide/ 佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比 ...
前言：這個網站詳細講了水平、垂直、水平垂直的css方法。https://css-tricks.com/centering-css-complete-guide/
佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。2009年，W3C提出了一種新的方案—-Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。
Flex 佈局是什麼
Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。 任何一個容器都可以指定為 Flex 佈局。註意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器的屬性
- flex-direction 值有四個：
row | row-reverse | column | column-reverse; - flex-wrap 值有3個：
nowrap | wrap | wrap-reverse; - flex-flow
flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap， - justify-content 值有5個：
flex-start | flex-end | center | space-between | space-around; - align-items 值有5個：
flex-start | flex-end | center | baseline | stretch; - align-content
項目的屬性
order 屬性定義項目的排列順序。數值越小，排列越靠前，預設為0。flex-grow 屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大。flex-shrink 屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目將縮小。負值對該屬性無效。flex-basisflex 屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。align-self
