columns分栏与flex弹性盒模型

columns  分栏

值：column-width:设置每列的宽度

       column-count:设置列数

 

例：columns{200px 3}   列数和宽度固定

       columns{200px}     列宽固定，根据容器宽度动态分布列数

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 :