css3Auto Scaling和使用

標籤：flex   適應   base   空間   lines   strong   順序   添加   flow   

columns  分欄column的中文意思就是欄的意思，在html中，作用是分列，把一塊內容相同比例均勻的分成一塊一塊的列，想報紙的內容似的，一篇文章在一張內容上分成好幾欄那樣顯示，它的屬性有 1.columns:  columns-width   column-count;   每一列的寬度和分成多少列；例：columns: 200px 3;   (ie10以上瀏覽器支援，Firefox，Google支援要加相容首碼)-webkit-columns:-moz-columns:-ms-columns: 2.column-gap: width normal;  (列與列之間的間距寬度，自訂或者預設normal,normal情況下，列之間間隙的寬度等於字型大小的寬度。)例：column-gap:20px;  (預設是normal);(ie10以上都支援，FirefoxGoogle需要加上加上相容首碼) 3.column-rule:  column-rule-width   column-rule-style  column-rule-color;用來設定列與列之間間隙中間那條分割線，屬性值有線寬度，樣式，顏色；例：column-rule:5px solid red;(ie10以上的ie都支援，FirefoxGoogle需要加上首碼) 還有三個屬性，用的不多，相容性也不太好4.column-span: 是否跨列，一般用來對欄目中的某個元素設定它顯示方式是否橫跨所有列，預設是none,不橫跨列顯示，橫跨列顯示是all屬性值；例：column-span:all;(相容性不是很好，ie10以上的瀏覽器支援，Firefox不支援。)5.column-fill:auto  balance;對列的高度的設定方式，預設是auto,列的高度自適應內容，balance指定列的高度以其中最高的一列統一。（此方法用的不多，瞭解為主）6.column-break-before(after):屬性值有auto(預設，不強迫也不禁止在指定的區塊層級元素前產生新列),always(在指定的區塊層級元素前斷行產生新列)，avoid(禁止在指定的區塊層級元素前產生新列)  用的比較少，瞭解為主，（ie10以上ie瀏覽器支援，Firefox不支援。）    伸縮盒（彈性盒模型）（舊版）例：<style>#box{display:-webkit-box; display:-moz-box; display: -ms-box; display: box; width:600px; height:180px; margin:0; padding:0; list-style:none; box-orient:horizontal;-webkit-box-orient:horizontal; }.li1{-weblit-box-flex:1; -moz-box-flex:1; -ms-box-flex:1; background:#666666;}.li2{-webkit-box-flex:2; -moz-box-flex:2; -ms-box-flex:2; background:#999999;}.li3{-webkit-box-flex:3; -moz-box-flex:3; -ms-box-flex:3; background:#cccccc;}</style><ul id="box">     <li class="li1">1</li>     <li class="li2">2</li>     <li class="li3">3</li></ul>注意：一定要開啟彈性盒模型，給父元素加 display:box; 屬性。display:-webkit-box;    display: -moz-box;   display: -ms-box;  設定彈性盒模型子項目的相片順序 box-orient : horizontal (從左至右水平排列)   vertical  (從上到下縱向排列)伸縮盒子項目的對其方式 box-pack :  start (從開始位置對齊，靠左對齊或上對齊)                    center (置中對齊)                    end (從結束對齊，靠右對齊或下對齊)                    justify (左右對齊)設定伸縮盒子的子項目的對其方式 box-align :  start  (從開始位置對其)                    center  （置中對齊）                    end     （從結束位置對其）                    baseline     （基準對齊）                    stretch     （自適應父元素尺寸） box-flex :  設定子項目占父元素空間的比例box-flex : 1;-webkit-box-flex : 1;-moz-box-flex : 1; box-flex-group :  不理解 box-ordinal-group: 設定盒子子項目的顯示順序  整數值來確定顯示順序 box-direction : 設定伸縮盒子物件的子項目的排列順序是否反轉                         normal (預設值，子項目按照正常順序排列)                         reverse (反轉伸縮盒子物件的排列順序) box-lines :  設定伸縮盒對象的子項目是否可以換行顯示；                    singel : 伸縮盒對象的子項目只在一行顯示                     multiple : 伸縮盒對象的子項目超出父元素的空間是換行顯示。     伸縮盒（彈性盒模型）（新版）flex需要給盒子添加 display : flex；屬性開啟彈性盒模型。display : -webkit-flex;flex-grow : 按比例分配父元素剩下的空間。flex-shrink : 按比例收縮移除父元素的空間。flex-basis : 設定彈性盒伸縮基準值 length(長度值來定義寬度)   百分比    auto(無特定)   content(基於內容自動計算寬度)flex-flow : 設定彈性盒模型子項目的相片順序   flex-direction(定義彈性盒子項目排列方向)   flex-wrap（控制flex容器是單行還是多行） ;flex-direction :  設定彈性和子項目的相片順序。          row : 橫向從左至右排列          row-revers : 對其方式與row相反          column : 縱向從上到下排列          column-revers : 對其方式與column相反。flex-wrap : 設定容器是單行還是多行          nowrap : flex容器為單行，子項可能會溢出          wrap : flex容器為多行， 子項溢出分布會放置到新行，子項內部會發生斷行          wrap-reverse : 反轉wrap排列align-content : 子項目在彈性盒裡的對其方式          flex-start:          flex-end:          center:          space-between:          space-around:          stretch:預設值align-items : 定義子項目在容器裡的側軸（縱軸）方向上的對其方式          flex-start :           flex-end:          center:          baseline:          stretch:預設值align-self : 定義flex子項單獨在側軸（縱軸）方向上的對齊, 適用flex子項          auto :           flex-start :           flex-end:          center:          baseline:          stretchjustify-content : 設定彈性盒子項目在橫軸方向上的對其方式          flex-start:          flex-end:          center:          space-between:          space-around;；order : 用數值定義排序方式，數值小的排在最前面，可以為負值。

css3Auto Scaling和使用