關於彈性盒模型

思想:經過給父容器設置屬性(display:flex || inline-flex),讓父容器有能力來改變子元素的寬度或者高度,以填滿可用空間,(可自適應不一樣尺寸設備,故多用於移動端佈局)

           彈性盒模型佈局在改變子元素排列方向,縮放,拉伸,收縮等方面,較傳統佈局方式有優點.

ps:1.css3 列在彈性盒模型中不起做用   2.float,clear,vertical-align在flex項目中,不起做用

基礎: 首先肯定彈性盒模型分爲主軸和側軸,如上圖所示

         flex-direction:做用於父容器元素,肯定主軸的方向,(從而規定子元素的排列方式),屬性值有:row(默認方向,由左到右,如上圖所示)  row-reverse   column  column-reverse

         flex-wrap :做用於父容器元素,設置或檢索子元素超出父元素容器時是否換行, 屬性值有: wrap no-wrap(默認) wrap-reverse    

        ( flex-flow=flex-direction+flex-wrap   做用於父容器元素,上面兩個屬性的二合一,設置或檢索子元素的排列方式)

         justify-content: 做用於父容器元素,設置或檢索子元素在父元素主軸方向上的對齊方式,屬性值有: flex-start flex-end  center space-between space-round 

        align-items: 做用於父容器元素,設置或檢索子元素在父元素側軸方向上的對齊方式,屬性值有:flex-start   flex-end   center   baseline   stretch

        align-content:   做用於父容器元素,設置或檢索彈性盒堆疊伸縮行(子元素不止一行)的對齊方式,即當彈性盒有多根軸線的時候,屬性值:flex-start flex-end center space-                                            between  space-round stretch

         下面的屬性都是關於子元素的:

          order:  用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

           flex:設置或檢索伸縮盒對象的子元素如何分配空間。

          align-self:設置或檢索彈性盒對象的子元素自身在側軸（縱軸）方向上的對齊方式,  auto | flex-start | flex-end | center | baseline | stretch