flex布局又稱為彈性布局、伸縮盒子等。
父盒子設定display:flex;後，子元素float、clear、vertical-align均失效
父項屬性有：
1.flex-direction
設定主軸方向
設定主軸上子元素排列方式
flex-start 從頭部開始，主軸若是x軸，則從左到右
flex-end 從尾部開始排列
center 在主軸居中對齊
space-around 平分剩餘空間
space-between 先兩邊貼邊，再平分剩餘空間
設定子元素是否換行（預設不換行，裝不下會縮小子元素寬度）
nowrap 預設值不換行
wrap 換行
4.align-items
設定側軸上的子元素排列方式（單行）
flex-start 預設值從上到下
flex-end 從下到上
center 垂直居中
stretch 拉伸（子盒子不要給高度）
設定側軸上的子元素排列方式（多行）
屬性同justify-content
6.flex-flow
flex-wrap和flex-direction的復合屬性
flex-wrap:row wrap;
flex布局子項常見屬性
1.flex屬性：
定義子專案分配剩餘空間，flex表示佔多少份數（詳見聖杯布局）
2.align-self屬性
子項在側軸上的排序方式
3.order屬性
專案的排列順序（數值越小越靠前，預設0）
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...
CSS關於flex布局
注意 flexbox布局最適合應用程式的元件和小規模布局，而grid布局則適用於更大規模的布局 談flex布局前先了解下flex的基本屬性 flex的基本屬性有flex basis flex direction flex wrap flex flow flex grow flex shrink六個 ...