flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。注意
屬性名屬性值
備註display
flex
定義了乙個flex容器，它的直接子元素會接受這個flex環境
flex-direction
row,row-reverse,column,column-reverse
決定主軸的方向
justify-content
flex-start,flex-end,center,space-between,space-around
設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式
align-items
flex-start,flex-end,center,baseline,stretch
設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式
flex-wrap
nowrap,wrap,wrap-reverse
如果一條軸線排不下，如何換行
flex-flow
[flex-direction] , [flex-wrap]
是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
屬性名屬性值
備註flex
[number]
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫
order
[int]
決定主軸的方向
flex-grow
[number]
設定或檢索彈性盒的擴充套件比率,根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間
flex-shrink
[number]
設定或檢索彈性盒的收縮比率,根據彈性盒子元素所設定的收縮因子作為比率來收縮空間
flex-basis
[length], auto
設定或檢索彈性盒伸縮基準值
align-self
auto,flex-start,flex-end,center,baseline,stretch
設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式，可以覆蓋父容器align-items的設定
感謝瀏覽，本文皇菇涼只是做簡單總結（大佬請ctrl+f4），如有覺得比較懵之處，可參考這裡（阮一峰）大佬文章，詳細明了有圖有案例；如覺得枯燥乏味不妨去b站看看pink老師講的課程，生動有趣還有專案，你一定喜歡的不要不要的喲！
flex布局（pink老師）
Flex布局簡單總結
複習到flex，總結一下方便檢視 以下6個屬性設定在容器上。屬性描述 值flex direction 決定主軸的方向 即專案的排列方向 row 預設值 row reverse column column reverse flex wrap 定義如何換行。nowrap 預設值 wrap wrap re...
Flex布局常用屬性簡單總結
常用布局方式也就是float，但flex布局更適合移動端專案開發 參考flex布局 1，布局方式 display flex display webkit flex safari a.橫向縱向布局 flex direction row column row reverse row reverse b....
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...