概念：採用flex布局的元素，稱為flex容器，他的所有子元素自動稱為容器成員，call flex專案（flex item)。詳細請參考mdn參考文件
具體如下圖
flex-direction：定義主軸的方向
row(預設值)：主軸為水平方向，起點在左
row-reverse：---------------------------------右
colum：主軸為垂直方向，起點在上
colum-reverse:------------------------下
flex-warp:定義軸線佔滿時是否換行
nowarp(預設)：不換
warp:換，超出的顯示在軸線下方
warp-reverse:-------------------上方
flex-flow:flex-direction和flex-warp 的合併簡寫形式
row nowarp(預設值)
justify-content:定義子元素在主軸上的對齊方式
flex-start:(預設值） 左對齊
flex-end:---------------右對齊
center:-----------------居中
space-between：將多餘空間在子元素間平分，兩端不留白
space-around:將多餘空間在元素和兩端間平分，兩端間距為元素間間距一半
space-evenly:兩端 元素間間距都相
align-content：定義多根軸線的對齊方式，只有一根時該屬性無效
stretch(預設值）:軸線佔滿整個交叉軸
flex-start:交叉軸 起點對齊
flex-end:-----------終點
center:--------------中心
space-between:兩端對齊，軸線間間隔平均分配
space-around:每根軸線兩側間隔相等，軸線間間隔比軸線與邊框大一倍
align-items：定義元素在交叉軸上如何對齊
stretch(預設值)：若元素為設定高度和auto ,預設佔滿容器高度
flex-start: 交叉軸 起點對齊
flex-end:------------終點
center:--------------中心
baseline:元素第一行文字對齊
order :定義元素的排列順序，遞增排序，預設0
flex-grow:定義元素的放大比例 預設 0，即存在剩餘空間也不放大
都為1 則等分剩餘空間
flex-shrink:定義元素的縮小比例 預設1 即空間不足 ，該元素將縮小
都為1 ，空間不足時，都等比例縮小
乙個為0 其他為1 ，不足時 0 不縮小
flex-basis:定義在分配多餘空間之前 元素佔據的主軸空間
預設auto 即專案原本大小
可設定成*** px 固定大小
flex : lex-grow、flex-shrink、flex-basis 的簡寫
預設 0 1 auto 後2個可選
align-self: 允許單個元素與其他元素有不一樣的對齊方式，可覆蓋 align-items 屬性
預設 auto 表示繼承父的align-items 屬性
可能寫得不是很完整，只是做專案時需要使用，在此小計一下，後面再詳細補充，若有不對，還望指教o_0
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...