正常流布局

就是一個塊一行，自上向下

Flex布局

flex布局分為父元素和子元素，只有父元素的display屬性是flex的時候，子元素的相關屬性才會生效

父元素

flex-flow

是方向和換行的結合體

just-content

規(guī)定在flex的方向上的對齊方式

默認的值是左對齊，和start是一樣的

普通的對齊3個，left center right?

space-around是平均分配剩余空間，使每個元素的左右空隙相同

space-between是將兩邊的元素拉到頭，中間的元素平均分配空間

space-evenly是指所有空間都相同，包括左右離變距離，是最完美的平均分

align-items

一般父元素不設高度，那么元素就會自動排列

如果設置高度，那么是這樣的

這是默認的樣式，所以在flex ?Y軸上也是可以調位置的

默認值是flex-start,如果改成flex-end就會跑到下面

主要講下center,就是放中間，然后元素行上下的空隙相同

align-content

和just-content如出一轍，只不是是Y軸方向的

子元素

order

是排列順序,,值越大，越排在前面

flex-grow

當有剩余空間的時候，那么加上這個屬性就可以分配剩余空間了，默認值是0，分配的份數和你的其它元素要按比例分配，如果其它元素沒有這個值那么有的就全部占領剩余空間了

flex-shrink

當flex不換行的時候，且空間不夠用的時候，元素就會被壓縮，這個值默認是1，是相對于其它元素被壓縮的比例，如果是0就不壓縮，保持原狀，是2的話就是壓縮是別的元素的2倍（被壓縮的更厲害）

flex-basis

屬性指定伸縮項的初始長度。 ，但是觸發(fā)了上面的條件還是要生效的

flex

是前面3個的縮寫

順序是flex-grow, flex-shrink, and flex-basis properties.