一
盒子模型已經不適用於某些特殊的佈局，
PS*dispaly規定元素應該生成的框的類型
.Class_{
dispaly: inline;//將元素指定爲行內元素;
dispaly: list-item;//將元素指定爲列表顯示;
dispaly: flex;//彈性佈局;
}
flex彈性佈局爲盒子模型提供最大的靈活性，所有容器都可以指定爲flex彈性佈局；
//行內元素彈性佈局
dispaly: inline-flex;
設爲彈性佈局後子元素的float，clear，vertical-align屬性都將會消失。
PS****
float: right;//右浮動；即使是塊元素也可以使之浮動顯示；
clear: left;//在左側不允許浮動元素。
clear: right;//在右側不允許浮動元素。
clear: both;//在左右兩側均不允許浮動元素。
clear: none;//默認值。允許浮動元素出現在兩側。
clear: inherit;//規定應該從父元素繼承 clear 屬性的值。
vertical-align:
vertical-align：text-top;//定義vertical-align屬性的元素頂端與父元素的字體頂端對齊;
vertical-align：middle;//行內元素居中對齊;
二
容器設置爲flex佈局，容器可視爲被主軸(橫向)和交叉軸(縱向)分割
三
flex-direction：column;
flex-wrap: wrap; //默認下flex佈局元素都在一條軸線上，使用flex-wrap可以換行；
flex-flow: column nowrap; //他是flex-direction和flex-wrap結合；
justify-content; //定義元素在主軸方向上的對齊方式：居中/左對齊/右對齊。。。
align-items; //定義元素在交叉軸上的對齊方式
align-content; //定義存在多根軸線時的對齊方式；
flex-direction:
flex-direction: column;//縱向展示，自頂開始,向下
flex-direction: column-reverse;//縱向展示，自底開始,向上
flex-direction: row;//橫向展示，自左開始,向右
flex-direction: row-reverse;//橫向展示，自右開始，向左
四
//下列屬性在已經定義爲flex佈局的容器的子項目中定義，用於對子項目進行
//排序，放大，縮小，自定義等等操作。
order
flex-grow
flex-shrink
flex-basis
flex
align-self