05.html弹性盒子模型和多列布局

弹性盒子模型和多列布局
弹性盒子模型
介绍
在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。
而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。
弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。
新旧版本的弹性盒子模型
在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。
而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹性盒子模型淘汰是必然，随着手机端的兼容性逐渐提升，旧版本必将被淘汰。
另外，新版本具有更加强大的功能，也值得我们进行深度的学习。
那么我们对于新旧两个版本的弹性盒子模型，我们只需要抱着对比的心态学习即可，掌握新版本，了解旧版本，这样即使有一天我们需要使用旧版本，也可以非常容易的学习旧版本的弹性盒子模型。
相关概念
主轴
我们以元素排在一行为例，当元素排列在一行的时候，主轴既表示元素排列的方向，横向排列则主轴即可以理解为一条横线，又因为我们元素默认是从左向右排列，那么我们可以说在默认的情况下，元素的主轴的起始位置是在左，而方向为右，终点也为右。
侧轴
元素垂直的方向即为侧轴。默认上为起点，下为终点。
弹性容器
我们想要使用弹性盒子模型，就需要将容器转换为弹性容器，我们说一个包含于子元素的容器设置了display:flex，那么这个容器也就变成了弹性容器。
弹性子元素
当子元素的父元素变成了弹性容器，那么其中的所有的子元素也自然而然的变成了弹性子元素。
如何创建一个弹性容器
display:flex|inline-flex
弹性容器属性
flex-direction
弹性容器中子元素的排列方式(主轴排列方式)
属性值
row:默认在一行排列
row-reverse:反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
flex-wrap
设置弹性盒子的子元素超出父容器时是否换行
属性值
nowrap: 默认值。规定元素不拆行或不拆列。
wrap:规定元素在必要的时候拆行或拆列。
wrap-reverse:规定元素在必要的时候拆行或拆列，但是以相反的顺序。
flex-flow
flex-direction 和 flex-wrap 的简写
align-item
设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
相关属性值
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
align-content
修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(行与行的对其方式).
相关属性
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
请注意本属性在只有一行的伸缩容器上没有效果。
justify-content
设置弹性盒子元素在主轴（横轴）方向上的对齐方式
相关属性
flex-start默认，顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐，中间自动分配
space-around自动分配距离
弹性子元素属性
order
设置弹性盒子的子元素排列顺序。 number排序优先级，数字越大越往后排，默认为0，支持负数。
flex-grow
设置或检索弹性盒子元素的扩展比率。
属性值:int
flex-shrink
设置或检索弹性盒子元素的收缩比率。
属性值:int
flex-basis
用于设置或检索弹性盒伸缩基准值
属性值:int
flex
设置弹性盒子的子元素如何分配空间
是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
align-self
在弹性子元素上使用。覆盖容器的 align-items 属性。
值与容器属性一样，只是这个是单独的设置某个元素。
多列布局
多列布局是css3当中新增加的布局属性，目的是让网页的布局变得更加的灵活。
相关属性
column-count 规定元素应该被分隔的列数.
值：number |auto
column-fill 指定如何填充列(兼容性较差，了解就好)
值： balance(所有列的高度与其中最高的一列统一)|auto(列高度自适应内容)
column-gap 指定列与列之间的间隙
值：length(用长度值来定义列与列之间的间隙。不允许负值 )|normal(与 <’ font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 )
column-rule 所有column-rule-*的属性的简写
语法：column-rule: column-rule-width column-rule-style column-rule-color
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的宽度
值：thin(较细的边框)|medium(中等边框)|thick(粗)|length;
column-span 指定元素要跨的列数
语法：column-span: 1(1或者none,横跨一列)|all(横跨所有列);
column-width指定列的宽度
语法：auto(浏览器将决定列的宽度)|length(指定列宽的长度，column-count会产生影响);
columns
设置column-width和column-count的简写