總結
1. div是塊級還是行內元素，影響的是div和同級元素的擺放位置
2. 為div設定寬高，影響的內容區域的寬高，影響div的子元素的擺放位置
一、容器屬性（div作為容器，設定inline-flex或者flex）
1. flex-direction為row或者row-direction，子元素的寬度設定可能失效（因為flex-wrap預設是nowrap，會擠滿整行）
2. flex-wrap=wrap時，按方向擺放元素
3. flex-flow預設值是『row nowrap』
4. justify-content定義水平方向從哪邊（左右）開始擺放元素
5. align-content定義垂直方向從哪邊（上下）開始擺放元素，如果專案只有一根軸線，該屬性不起作用。它會覆蓋align-items的配置
6. align-items在換行之後出現多行後，在元素所屬行的範圍內的垂直方向，控制從哪邊（上下）開始擺放元素
flex-direction:row(預設),row-reverse,column,column-reverse(我的疑問：後端返回資料js反轉和css排列反轉，哪個更好)
flex-wrap：nowrap(預設),wrap,wrap-reverse
justify-content：flex-start(預設),flex-end,center,space-around,space-between
align-content:flex-start,flex-end,center,space-around,space-between,stretch(預設)
align-items:flex-start,flex-end,center,baseline,stretch(預設)
二、專案屬性
1. order,預設是0，越小越靠前，支援負數
2. flex-grow,預設是0，不放大。大於0時表示該專案佔剩餘寬度（容器寬度減去所有flex-grow為0的專案的寬度）的份數
3. flex-shrink,預設是1，放不下時會縮小，縮小的比例按剩餘寬度（容器寬度減去所有flex-shrink為0的專案的寬度）除以flex-shrink為1的專案的數量
4. flex-basis,定義了再分配多餘空間之前，專案佔主軸的空間。預設值為auto，即專案本身的大小
5. flex為flex-grow，flex-shrink，flex-basis的組合，預設值為(0,1,auto),另外還有可選值auto(1,1,auto)，none(0,0,auto).建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
6. align-self:允許單個專案有與其他專案不一樣的對齊方式，預設值時auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。可選值還有flex-start,flex-end,center,baseline,stretch。
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css布局之彈性布局flex
作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...
CSS之Flex彈性布局
flex彈性布局實現水平垂直居中 父盒子display flex 子盒子margin auto 概念 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 父容器 displa...