好程式員web前端技術分享css3舊版彈性盒

 好程式員web前端技術分享css3舊版彈性盒

1、display:box

說明：

(必須加字首)設定彈性盒
使用如下屬性，必須在父代設定display:box;           

2、box-orient

在父級上設定該屬性，則子代按水準排列或豎直排列。           

　　　　注：所有主流浏覽器不支援該屬性，必須加上字首。

　　　　1）horizontal  水準排列，子代總width=父級width。若父級固定寬度，則子代設定的width無效，子代會撐滿父級寬度。

　　　　2）vertical  垂直排列，子代總height=父級height。若父級固定高度，則子代設定的height無效，子代會撐滿父級高度。

 3、 box-pack

在父級設定，子代的水準對齊方式。（父容器裡面主軸對齊方式）           

　　　　1）start  水準左對齊

　　　　2）end  水準右對齊

　　　　3）center  水準居中對齊

 4、 box-align

在父級設定，子代的垂直對齊方式。（父容器裡面子容器側軸對齊方式）           

　　　　1）start  垂直頂部對齊

　　　　2）end 垂直底部對齊

　　　　3）center 垂直居中對齊

　　　　4）stretch 拉伸子代的高度，與父級設定的高度一緻。子代height無效。

 5、 box-direction

在父級上設定該屬性，确認子代的排列順序。           

　　　　1）normal  預設值，子代按html順序排列

　　　　2）reverse  反序

 6、 box-flex

1）占父級元素寬度的number份           

　　　　2）若子元素設定固定寬度，則該子元素應用固定寬度，其他未設定固定寬度的字元素将餘下的父級寬度（父級-已設定固定寬度的子代元素的總寬度按　number占份數

　　　　3）若子元素有margin值，則按餘下（父級寬度-子代固定總寬度-總margin值）寬度占number份

四、CSS3 多列

CSS多列(屬性要加字首)

1、column-count

屬性規定元素應該被分隔的列數
适用于：除table外的非替換塊級元素, table-cells, inline-block元素           

2、column-gap

屬性規定列之間的間隔大小           

3、column-rule

設定或檢索對象的列與列之間的邊框。複合屬性。
column-rule-color規定列之間規則的顔色。
       column-rule-style規定列之間規則的樣式。
      column-rule-width規定列之間規則的寬度。           

4、column-fill

設定或檢索對象所有列的高度是否統一
auto：列高度自适應内容
balance：所有列的高度以其中最高的一列統一(預設值)           

5、column-span

設定或檢索對象元素是否橫跨所有列。
none：不跨列
all：橫跨所有列           

6、column-width

設定或檢索對象每列的寬度           

7、columns

設定或檢索對象的列數和每列的寬度。複合屬性
<' column-width '> || <' column-count '>           

例：columns:100px 3;

注釋：

Internet Explorer 10 和 Opera 支援多列屬性。

Firefox 需要字首 -moz-。

Chrome 和 Safari 需要字首 -webkit-。