css3弹性伸缩和使用

columns  分栏

column的中文意思就是栏的意思，在html中，作用是分列，把一块内容相同比例均匀的分成一块一块的列，想报纸的内容似的，一篇文章在一张内容上分成好几栏那样显示，它的属性有

1.columns:  columns-width   column-count;   每一列的宽度和分成多少列；

例：columns: 200px 3;   (ie10以上浏览器支持，火狐，谷歌支持要加兼容前缀)

-webkit-columns:

-moz-columns:

-ms-columns:

2.column-gap: width normal;  (列与列之间的间距宽度，自定义或者默认normal,normal情况下，列之间间隙的宽度等于字体大小的宽度。)

例：column-gap:20px;  (默认是normal);

(ie10以上都支持，火狐谷歌需要加上加上兼容前缀)

3.column-rule:  column-rule-width   column-rule-style  column-rule-color;

用来设置列与列之间间隙中间那条分割线，属性值有线的宽度，样式，颜色；

例：column-rule:5px solid red;

(ie10以上的ie都支持，火狐谷歌需要加上前缀)

 

还有三个属性，用的不多，兼容性也不太好

4.column-span: 是否跨列，一般用来对栏目中的某个元素设置它显示方式是否横跨所有列，

默认是none,不横跨列显示，横跨列显示是all属性值；

例：column-span:all;(兼容性不是很好，ie10以上的浏览器支持，火狐不支持。)

5.column-fill:auto  balance;对列的高度的设置方式，默认是auto,列的高度自适应内容，

balance指定列的高度以其中最高的一列统一。（此方法用的不多，了解为主）

6.column-break-before(after):属性值有auto(默认，不强迫也不禁止在指定的块级元素前产生新列),always(在指定的块级元素前断行产生新列)，avoid(禁止在指定的块级元素前产生新列)  用的比较少，了解为主，（ie10以上ie浏览器支持，火狐不支持。）

 

 

 

伸缩盒（弹性盒模型）（旧版）

例：

<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:

          stretch

justify-content : 设置弹性盒子元素在横轴方向上的对其方式

          flex-start:

          flex-end:

          center:

          space-between:

          space-around;；

order : 用数值定义排序方式，数值小的排在最前面，可以为负值。