弹性盒模型

                                             弹性盒

一、box-sizing
box-sizing:此属性用来指定元素的宽度与高度的计算方法

二、css3弹性盒
css3引入一种新的布局模式——Flexible Box布局，即伸缩布局盒模型（弹性盒布局），用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。
主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）,flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器,最重要的是，flex布局反向不可预知。

flexbox模型中的专业术语：
1、主轴和侧轴
2、主/侧轴、侧/侧轴方向
3、主/侧轴起点、主/侧轴终点
4、主/侧轴长度
5、伸缩容器(父元素)和伸缩项目(子元素)

伸缩容器：弹性盒子-父元素
伸缩项目：弹性盒子的子元素
主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局;它不一定是水平的；这主要取决于“justify-content”属性（详细见下文）。
主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点（main-start）向主轴终点（main-start）方向。
主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。
侧轴（cross axis）：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
侧轴起点（cross-start）和侧轴终点（cross-end）：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴尺寸（cross size）：伸缩项目在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

弹性盒子由于历史原因，分成旧版本，混合版本（IE），新版本。如果你要兼容旧版本的浏览器的话，需要准备多套语法，开发测试成本很高。当然前景是光明的，等旧式浏览器逐渐被淘汰，弹性盒子的布局必将大放异彩。

以下属性设在容器上：
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

（1）display：设置元素为弹性盒
属性值：
flex/inline-flex将原本的盒模型改成弹性盒模型;
效果：
使内部元素获得弹性布局的效果，原本应该垂直排列的4个子div，被默认从左到右水平排列了。

旧语法：display：box和inline-box，且需要加上各浏览器前缀，如display: -webkit-box;；
混合版：主要针对IE10，均加上了-ms-前缀，display值是-ms-flexbox和-ms-inline-flexbox

（2） flex-direction：设置容器的主轴方向
属性值：
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

旧语法： 2个子属性box-orient和box-direction
box-orient用于设置容器排列方式，值为horizontal（默认值），vertical，inline-axis，block-axis；horizontal或inline-axis等价于新语法的row，vertical或block-axis等价于新语法的column。
box-direction用于设置容器排列顺序，值为normal（默认值），reverse；因此设置box-orient后，再加上box-direction: reverse;等价于新语法的row-reverse/column-reverse。
混合版：相比新版只需加上-ms-前缀，即-ms-flex-direction，值同新语法

（3） flex-wrap：用于设置伸缩项目在主轴上的换行方式
属性值：
nowrap（默认值）会自动调整子元素宽度以保持不换行；
wrap不改变元素宽度，显示不下就换行；
wrap-reverse同一行显示不下，换行的同时，调整行的顺序。
旧语法：不是flex-wrap而是box-lines，默认值single表示项目一行或一列显示，multiple 表示自动换行或多列表示。
混合版：相比新版只需加上-ms-前缀，即-ms-flex-wrap，值同新语法

（4） flex-flow：用于合并指定flex-direction和flex-wrap属性，默认值为row nowrap，该属性单纯为了简化代码而已；
旧语法：无该属性
混合版：相比新版只需加上-ms-前缀，即-ms-flex-flow，值同新语法

（5） justify-content：用于设置子元素在主轴上的对齐方式
属性值：flex-start（起点对齐），flex-end（终点对齐），center（居中对齐），space-between（分开两端对齐），space-around（分开边距对齐）。

旧语法：box-pack：start，end，center，justify（等价于新语法的space-between）
混合版：-ms-flex-pack：start，end，center，justify（等价于新语法的space-between），distribute（等价于新语法的space-around）。

（6） align-items： 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
属性：flex-start（起点对齐），flex-end（终点对齐），center（居中对齐），baseline（根据元素的基线），stretch(默认值，如果项目未设置高度或设为auto，可以被拉伸为容器的高度)。
旧语法： box-align：start，end，center，baseline，stretch，和新语法相比就值名不同。
混合版：是-ms-flex-align，值同旧语法。

（7） align-content：用于设置多行子元素在容器侧轴上的对齐方式；
属性值：flex-start（起点对齐），flex-end（终点对齐），center（居中对齐），space-between（分开两端对齐），space-around（分开边距对齐），
stretch(默认值-项目被拉伸以适应容器)。
align-content用于设置多行子元素在侧轴上的对齐方式；因此一定要多行（必须flex-wrap: wrap）才能出效果，如果容器内就一行子元素是没有效果的。
旧语法：无该属性
混合版： -ms-flex-inline-pack：start，end，center，justify（等价于新语法的space-between），distribute（等价于新语法的space-around），stretch;

以下属性设在容器上：
align-self
flex-grow
flex-shrink
flex-basis
flex
order

（1）align-self：用在子元素上，为某一个子元素设置侧轴的对齐方式;
属性值：
auto(默认值-表示继承容器的align-items-单行子元素在侧轴上的对其方式)，stretch（当伸缩容器没有设置align-items时），flex-start（起点对齐），flex-end（终点对齐），center（居中对齐），baseline（元素基线对齐）；
align-self属性可以灵活重写容器的align-items属性，效果同align-items。
旧语法：无该属性
混合版：不是align-self而是-ms-flex-item-align，值为auto，start， end，center，baseline，stretch

（2）flex-grow：将容器剩余的空间等比例扩展给子元素；
即当容器空间大于内部元素空间之和时，剩余部分将根据各元素指定的flex-grow按比例分配，使各元素增大；默认值为0，表示剩余空间不分配。

（3）flex-shrink [ʃrɪŋk]：设置弹性盒的收缩比率；
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。即当容器空间小于内部元素空间之和时，溢出部分将根据各元素指定的flex-shrink按比例分配，使各元素缩小；默认值为1，表示溢出时等比例缩小；
正确的算法：
超出空间：1000-(900+200)=-100;
加权总和：=(第一个子元素的宽度)(shrink)+（第二个子元素的宽度）(shrink)+…;
child1被移除的比例：(第一个子元素的宽度*shrink)/加权综合)*超出空间 =缩放的像素数
因此当外层容器宽度小于内部元素宽度之和时，内部元素的flex-shrink值越大，分配到的溢出空间的比例越高，元素就越小。

（4）flex-basis ：设置弹性盒伸缩基准值（指定flex-item（项目/子元素）在主轴上的初始大小）
auto：默认值，会检索width属性的值，如果设置了width属性而且不为auto，则默认使用width的属性值（width）
content:如果没有设置width属性，则宽度跟内容同宽（浏览器暂不支持）；
length，percenterage：规定子项目的初始长度；不允许负值;
如果所有子元素的基准值大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余的空间。
当flex-basis设置为auto，并且width不为auto时，计算子项目基准值用width的属性值

（5）order：用于指定内部元素的显示顺序，数值越小排列越靠前，可以为负值
默认值0，表示元素是根据DOM的先后顺序来显示的，有了该属性可以轻松调整元
素顺序。

6）flex
（1）属性用于指定弹性子元素如何分配空间
（2）用于合并指定flex-grow和flex-shrink和flex-basis属性，默认值为0 1 auto；还有两个快捷值auto等价于1 1 auto，none等价于0 0 auto。
旧语法：是box-flex，即旧语法中不分flex-grow，flex-shrink统一用box-flex来设定，如果容器空间大于元素之和就相当于flex-grow，反之就相当于flex-shrink。没有flex-basis。
混合版：相比新版只需加上-ms-前缀，即-ms-flex，值同新语法；

1、圣杯布局
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。
页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

多列布局
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
多列属性：
column-count
column-gap
column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性。

创建多列
column-count: 数字
属性规定元素应该被分隔的列数
规定列之间的间隔
column-gap:数值+px
属性规定列之间的间隔
列规则
column-rule: ?px 线条 颜色
属性设置列之间的宽度、样式和颜色规则