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 : 
 
 

columns分栏与flex弹性盒模型的更多相关文章

  1. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  5. box flex 弹性盒模型(转载)

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  6. flex弹性盒模型

    flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...

  7. Flex弹性盒模型(新老版本完整)--移动端开发整理笔记(二)

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  8. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  9. flex 弹性盒模型的一些例子;

    1.垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. EntityFramework Code First 构建外键关系,数据库不生成外键约束

    创建 ExtendedSqlGenerator类 public class ExtendedSqlGenerator : SqlServerMigrationSqlGenerator { #regio ...

  2. winform 控件合集2

    http://www.cnblogs.com/peterzb/archive/2009/06/18/1505424.html 包含自定义绘制的ListBox, 带拖动,图片显示, 内嵌其它控件, 打印 ...

  3. CF-839A

    A. Arya and Bran time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. gSoap使用入门(2)----自定义接口头文件

    摘自:http://blog.csdn.net/zhuzhihai1988/article/details/8131556 接口头文件的格式在向导中没有看到明确的说明性的内容,但通过看开发包中示例程序 ...

  5. textarea的style="resize:none;"

    <textarea class="form-control" id="gryj" rows="3" maxlength="3 ...

  6. (I/O完成端口中的)995错误

    在windows下,可能会出现995的错误,msdn对该错误的解释为: The I/O operation has been aborted because of either a thread ex ...

  7. 反射(type和assembly)

    这里简要介绍type和assembly 自定义特性 为了理解编写自定义特性的方式,应了解一下在编译器遇到代码中某个应用自定义特性的元素时,该如何处理. [AttributeUsage(Attribut ...

  8. HDU5340 Three Palindromes

    Three Palindromes Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  9. 剑指Offer的学习笔记(C#篇)-- 整数中1出现的次数(从1到n整数中1出现的次数)

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...

  10. RPC00

    https://mp.weixin.qq.com/s?__biz=MjM5ODI5Njc2MA==&mid=2655824821&idx=1&sn=50fa59165aedc8 ...