flex-direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。
flex-direction: row; 布局的排列方向 （主軸排列方向）
row 預設值，顯示為行。方向為當前文件水平流方向，預設情況下是從左往右。
row-reverse 顯示為行。但方向和row屬性值是反的
column 顯示為列
column-reverse 顯示為列。但方向和column屬性值是反的
注：當子項的總寬度大於父容器的時候，會自動收縮的（彈性的優先順序是大於自身固定大小的）
注：當子項的內容已經達到了父容器最小寬高的時候，就會出現溢位的現象。
注：預設情況下，在彈性盒子中的子元素的左右排列的。
flex-wrap : nowrap; 是否進行換行處理。
nowrap; 預設值，不換行處理
wrap; 換行處理
wrap-reverse; 反向換行
flex-flow : flex-direction flex-wrap 復合寫法 (是有順序的)。justify-content ; 屬性決定了主軸方向上子項的對齊和分布方式。
flex-start ： 子項都去起始位置對齊。
flex-end ： 子項都去結束位置對齊。
center ： 子項都去中心位置對齊。
space-between : 表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
space-around : around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。
space-evenly : evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。
align-items : 每一行中的子元素上下對齊方式。
flex-start;
center;
flex-end;
align-content : 跟justify-content相反的操作。側軸的對齊方式。(最少需要兩行才能看出效果，因為他是多行的乙個上下對齊方式)
預設：多行下，有幾行就會把容器劃分為幾部分，預設就是stretch拉伸的。
值跟justify-content取值是相同的。
order : 排序
flex-grow : 擴充套件 ( 想看到擴充套件的效果，必須有空隙 )
0: 預設值 , 不去擴充套件
1: 去擴充套件 , 會把空白區域全部沾滿
子元素會按照設定的比例值來分配空隙，如果比例值總和小於1，那麼會有空隙，如果比例值總和大於等於1，那麼就沒有空隙。
flex-shrink : 收縮
正常預設值是1
0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正常縮放1進行比較的）
flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是設定乙個比例值，flex-basis是設定乙個具體值。
flex : 一種復合寫法
flex-grow flex-shrink flex-basis
flex:1;
flex :11
0
flex:0;
flex :01
0 algin-self: 跟align-items操作很像，區別就是只是針對某乙個子項。
注：水平是主軸的時候：預設情況下，當寬高不寫的時候，寬度由內容決定，高度由父容器決定。
垂直是主軸的時候：預設情況下，當寬高不寫的時候，寬度由父容器決定，高度由內容決定。
注：當子項的總寬度大於父容器的時候，會自動收縮的（彈性的優先順序是大於自身固定大小的）
注：當子項的內容已經達到了父容器最小寬高的時候，就會出現溢位的現象。
注：彈性布局中用的頻率比較多的語法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
注：彈性布局的優勢是做一維布局，網格布局的優勢是做二維布局。
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...
理解CSS彈性盒模型flex
css3引入了一種新的布局模型 flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和css3其他屬性不一樣，flexbox並不是乙個屬性，而是乙個模組，包括多個css3屬性。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕...
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...