首先父容器設定彈性盒子：display：flex；
1.flex-direction設定主軸方向
row:預設值 主軸從左到右；
column:主軸從上到下；
row-reverse:主軸從右到左；
column-reverse:主軸從下到上；
2.設定子項是否換行：flex-wrap:wrap
nowrap:預設值
wrap:會換行
wrap-reverse:倒著換行
3.設定主軸上的對齊方式（針對於單行的對齊方式）：justify-content:center;
flex-start:主軸開始的位置排序
flex-end:主軸結束的位置開始
center：居中
space-around平均分布， 每乙個專案兩側有相同的留白空間，兩端子項距離父邊框的距離 = 子項之間的距離/2
space-between：專案均勻分布，第一項在起點線，最後一項在終點線
space-evenly：專案均勻分布，所有專案之間及專案與邊框之間距離相等
4設定交叉軸上的對齊方式（單行對齊）：align-items:stretch
stretch:預設值 要想有效果，讓子項沒有設定高度
flex-start:專案按交叉軸起點線對齊
center：交叉軸方向專案中間對齊
flex-end：專案按交叉軸終點線對齊
baseline:保證子項的文字基線統一
align-content屬性定義了在交叉軸方向的對齊方式及額外空間分配，類似於主軸上justify-content的作用
stretch (預設)：拉伸顯示
flex-start：從啟點線開始順序排列
flex-end：相對終點線順序排列
center：居中排列
space-between：專案均勻分布，第一項在啟點線，最後一項在終點線
space-around：專案均勻分布，每乙個專案兩側有相同的留白空間，相鄰專案之間的距離是兩個專案之間留白的和
flex-grow: 當一行的主軸方向有空餘空間的情況下，按照設定好的比例，分配剩餘空間;土地擴樁 預設值0，則不參與瓜分
flex-basis:效果等同於width,權重值高於width,在js列印出來的寬度也是這個
flex-shrink:屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。0表示不縮小，負值無效。
orders：設定子項的排列順序 數值越小越靠前，預設值0
align-self 設定子項在交叉軸上的對齊方式,如果給父級也設定了交叉軸上的對齊方式，單**況聽自己的，多**況下，要有團隊意識，聽父親的
項的具體寬度（內容區的實際寬度）：shink + … = 得到乙個總的權重值
每乙個shink占得權重總數的比例 * 溢位的寬度 = 實際壓縮的資料
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...