strive 檢視css某個屬性，相容情況
傳統的(盒子模型)
盒子模型：
box-sizing:content-box平時普通盒子模型，padding，border,盒子會變大(向外擴充套件)
box-sizing:border-box盒子模型 padding border,盒子模型不變大(向內擴充套件)
flex布局
父級display:flex;
新增瀏覽器字首 -webkit ,真實工作，postcss外掛程式，自動新增瀏覽器字首
如果用了彈性布局，子元素，不需要浮動，float.
flex-direction(排列方式):row(橫向)，row-reverse(橫向翻轉)，column(縱向)，row-reverse(縱向翻轉)
justify_content(子元素水平排列方式):center(居中),flex-start:(居左) ,flex-end:(居右) ,space-between(兩端對齊),space-around(拉手分布)
align-item:(子元素垂直排列方式):center(居中),flex-start:(居上) ,flex-end:(居下)
align-content(多行垂直排列方式): center(居中),flex-start:(居上) ,flex-end:(居下)
flex-wrap(包裹方式):nowrap(不換行)，wrap(換行)
flex-flow:<flex-direction>縮寫 排列方式和包裹方式
子級
flex:1(平分父級寬度) 係數:父級平分後,每個佔的比例，子元素在劃分父元素寬度，先丟擲固定寬度後再平分係數
flex-grow:1 ，定義子元素放大比例，換行後的子元素佔滿螢幕
align-self：其實就是單個用來覆蓋父級的align-item的方式
order:0用來規定子元素的排列順序。數值越小，越靠前，預設值是0；
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...
flex移動端 布局
在移動端中，一般用flex布局來解決當螢幕適應時出現布局錯亂的現象 步驟 1，在開始階段先開啟flex布局，就是在父盒子上display flex 開啟flex布局 而且flex都是對父元素操作來影響子元素的，這裡的子元素是一級子元素，只能影響一級子元素，而且是 所有的一級子元素，其中有幾個重要且常...