一、flex 布局是什麼？
flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為 flex 布局。
.box
行內元素也可以使用 flex 布局
.box
其中webpick伺服器前邊必須加上-webpick
注意，設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
二、基本概念
採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"
三、容器的屬性
flex-direction屬性決定主軸的方向（即專案的排列方向）。
flex-wrap屬性
（1）nowrap（預設）：不換行。
(2)wrap：換行，第一行在上方
(3)wrap-reverse：換行，第一行在下方。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
justify-content屬性
四、專案的屬性
以下6個屬性設定在專案上
order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow屬性
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink屬性
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex屬性
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto(1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
參考自
預設布局換行 Flex布局教程
本篇為學習筆記。內容來自網路。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flexbox 是一種一維的布局，是因為乙個 flexbox 一次只能處理乙個維度上的元素布局，一行或者一列...
預設布局換行 Flex布局入門
主要提供簡便 完整 響應式布局解決方法，設定flex布局後元素的 float clear vertical align屬性將失效 flex direaction 決定主軸的方向 引數 row 預設值 主軸為水平方向，起點在左端 row reverse 同上，起點在右端 column 主軸為垂直方向，...
預設布局換行 移動WEB開發 Flex布局
1 如果是pc端頁面布局，我們還是使用傳統布局 2 如果時移動端或者不考慮相容性問題的pc端頁面布局，我們使用flex彈性布局 flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列順序。預設主軸為水平從左往右 flex direction row 主軸為水平從右往左 flex...