彈性盒子是css3的一種新布局模式，由容器（父元素）和專案（子元素）組成。
彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒模型的目的：提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白區間。
設定彈性盒子：display:flex或inline-flex; 區別：flex獨佔一行；inline-flex佔據自己應該佔據的位置，有點像inline-block，不支援margin:auto。
1.flex-direction確定主軸和方向
2.flex-wrap規定專案是否換行
3.flex-flow復合屬性，flex-direction和flex-wrap組成的復合屬性
4.justify-content專案在主軸上的對齊方式
5.align-content多行專案在交叉抽（與主軸垂直）上的對齊方式，不要和align-items共存
6.align-items單行專案在交叉軸上的對齊方式
1.flex-grow設定專案的擴大比例
2.flex-shrink設定專案的收縮比例
3.flex-basis設定專案初始長度
4.flex復合寫法flex:flex-grow flex-shrink flex-basis
5.align-self單獨控制交叉軸乙個專案的對齊方式
6.order規定專案在主軸上的排列順序
以上為個人理解，如有不當之處請指正！
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
css 彈性盒模型Flex 布局
參考文章 flex 布局是什麼 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 如下 fle...
Flex彈性盒模型
flex direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。flex direction row 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件水平流方向，預設情況下是從左往右。row reverse 顯示為行。但方向和row屬性值是...