弹性盒子相关

一、弹性盒子模型1、flex三个子属性介绍①flex-grow  定义项目的放大比例，默认为0，即如果存在剩余空间也不放大②flex-shrink定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。收缩量的计算方式：（元素宽度*收缩比例/元素*收比例    相加）*溢出宽度③flex-basis2、项目的主轴方向的长度flex（flex-grow，flex-shrink、flex-basis）说明：复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。缩写「flex: 1」, 则其计算值为「1   1   %」缩写「flex: auto」, 则其计算值为「1   1   auto」flex: none」, 则其计算值为「0   0  auto」flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值3、order 控制伸缩项目的显示的顺序，数字越大越往后排，默认为0，支持负数，没有单位的整数值。4、flex-flow    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;二、css3多列1、column-count：分栏的个数2、column-width：分栏的宽度3、column-gap：分栏的间距4、column-rule：分栏的边框5、column-span：all/none  设置或检索对象元素是否横跨所有列。6、column-fill设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持）           auto：列高度自适应内容           balance：所有列的高度以其中最高的一列统一(默认值)7、columns设置或检索对象的列数和每列的宽度。复合属性   columns:300px 3; <' column-width '> || <' column-count '>8、break-inside:avoid避免中断描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。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 '>8、break-inside:avoid避免中断描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。