flex: [ ? || ]
flex屬性值可以包含三個引數：flex-grow，flex-shrink 和 flex-basis。
第二個和第三個引數（flex-shrink 和 flex-basis）可選。
當flex屬性值取兩個引數的時候。預設指定的是第乙個引數和第三個引數值。如下述：
.flex-item通過這個例子驗證下邊的屬性：
one
twothree
.box
.box > div
.box > div:nth-child(1)
.box > div:nth-child(2)
.box > div:nth-child(3)
依次修改下述屬性值：
1. flex: none
等同於flex: 0 0 auto
這時候容器完全不再靈活。即不能放大也不能縮小。
該屬性和 flex:initial （下方）很類似，除了它不允許 flex-shrink 屬性（不能縮小），即使元素可能會溢位。
如果讓容器 box 裡的flex元素呢內容超過 box 容器預設寬度。元素會溢位。
等同於flex: initial.預設值為flex: 0 1 auto。
此時，當容器剩餘一些空閒空間時，該屬性使靈活的專案變得不靈活，因為其不能自由拉伸放大。
但是當容器沒有足夠的空間時，該屬性允許其縮小到專案的最小值。
因為空間不足第三個 div 縮放到除去其他元素所佔空間的最小值，主軸上不會溢位。
3. flex: auto
等同於flex: 1 1 auto
這個時候，該屬性使專案完全靈活，它們能夠吸收主軸上額外的空間。既可以自由放大也可以自由縮小。
《意為 正數》
等同於flex: 1 0px
當 flex 取值為乙個非負數字，則該數字為 flex-grow 的值，flex-shrink 取 1，flex-basis 取 0%。
這個時候，該屬性
使彈性專案變得靈活，flex元素在主軸方向上的初始大小flex-basis為零。
專案將根據容器的大小按照自身的比例自由伸縮。
5. flex:xxpx ||%xx
等同於flex: 1 xxpx||%xx
該屬性和上邊的css案例一致，即 當 flex 取值為乙個非負數字和乙個長度（px）或百分比（%），
則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 預設取 1
flex布局的常見屬性
主軸與側軸 flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有 行和列 x軸y軸 常見的父項屬性 flex direction 設定主軸的排列方向 子元素事是跟著主軸來排列的 row 預設值從左向右 row reverse 從右向左 column 從上到下 column reverse 從下到上...
flex布局常見屬性
flex direction row 從左到右 預設值 flex direction row reverse 從右到左排序 flex direction columm 從上到下 flex direction columm reverse 從下到上justify content flex start ...
Flex 布局的各屬性取值解釋
flex布局是一種彈性布局。布局樣式比較靈活，大多數情況下可以替代float，而且不會脫離文件裡流。flex中定義了兩個軸線，乙個主軸乙個副軸，這個概念你可以想想螢幕座標系 x軸向右，y軸向下 flex的軸線角色可以調換而且方向也可以變。屬性 1。flex direction 這個屬性決定了flex...