columns分栏与flex弹性盒模型

columns  分栏
值:column-width:设置每列的宽度
       column-count:设置列数
 
例:columns{200px 3}   列数和宽度固定
       columns{200px}     列宽固定,根据容器宽度动态分布列数
columns分栏与flex弹性盒模型
column-width   默认auto,定义列宽,不能为负值
column-count   默认值auto,定义列数,不能为负值
column-gap      定义列与列之间的缝隙,默认是字体的宽度,不能为负值
column-rule :  column-rule-width    column-rule-style   column-rule-color;   设置列之间边框的厚度,样式,颜色。
column-span : none   all;    设置元素是否横跨所有列。对某个元素进行设置,让其横跨所有列或不横跨。
column-fill : auto   balance;   列高度自适应内容,列高度以其中最高的一列统一。
column-break-before :  设置是否在对象之前进行断行 
auto(不强迫不禁止)  
always(总是在元素之前断行产生新列) 
avoid(避免在元素之前断行并产生新列)
column-break-after : 设置对象之后是否断行 
auto(不强迫不禁止)  
always(总是在元素之后断行产生新列) 
avoid(避免在元素之后断行并产生新列)
column-break-inside : 
          auto(不强迫不禁止在元素内部断行产生新列)
          avoid(避免在元素内断行产生新列)
 
伸缩盒(弹性盒模型)(旧版)
例:
<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 : 
 
 
上一篇:box flex 弹性盒模型(转载)


下一篇:被废了的display:box弹性盒模型