主軸的方向的設定
預設情況，x軸從左到右
column（y軸從上到下）
column-revrese(y軸從下到上)
row:預設值
row-reverse,x軸從右到左
主軸方向的對其方式;
justify-content:
flex-end 主軸結束方向對齊；
center主軸居中
工作原理；
stepl;獲取剩餘空間 300
steo2:獲取專案的個數 5
step3:獲取剩餘空間/專案的個數的結果
step4:吧step3的結果除以2
step5:把step4的結果，分配給每個專案左右;
space-between:主軸兩端對齊；
space-around:主軸分散對齊;
space-evenly:主軸平均分配;
取值：flex-start頂端對齊
flex-end;交叉軸結束對齊
center；交叉軸居中；
baseline:基礎對齊
atretch；如果專案沒有給高；
換行條件1，所有專案尺寸之和要大於容器的尺寸,
條件2：所有專案寬度之和要大於容器的尺寸,
flex-wrap: nowrap(預設)
flex-wrap:wrap 換行
換行為剩餘空間
flex-wrap: wrap-reverse;換行倒敘
多跟軸線對齊方式;
align-content: flex-start; 所有軸線交叉軸頂部對齊
align-content: flex-end; 所有軸線交叉軸底部對齊；
align-content: center; 所有軸線交叉軸居中；
align-content: space-around; 交叉軸兩端對錢；
align-content: space-between; 交叉軸分散對齊；
align-content: space-evenly; 交叉軸平均分配
容器的寬度-所有專案的寬度=剩餘空間
主軸起始和換行的簡寫方式
flex-flow:主軸起始，是否換行
flex-flow:column wrap
在這裡插入**片彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...