CSS3弹性盒子

多列布局

columns 复合属性包含以下两个的简写。
column-count 规定元素应该被分隔的列数。
column-width 规定列的宽度。
column-gap 规定列之间的间隔。
column-rule 设置列宽之间的复合样式，包含以下三个，不占用空间
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 标题元素应该横跨的列数。

盒模型

box-sizing
box-border ,包含边距边框
box-content，只计算内容区

弹性盒子

display：flex 容器属性；
不起作用的属性，float，clear，column，vertical-alige

flex-direction 属性决定主轴的方向（即项目的排列方向）

flex-wrap 如果一条轴线排不下，如何换行。

flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默 认值为row nowrap。

justify-content 定义了项目在主轴上的对齐方式。

align-items 项目在交叉轴上如何对齐。

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

内容使用属性：

flex-direction的属性值有:

row（方向【 箭头向右，默认值】）
row-reverse 【 箭头向左】
column 【 头向下】
column-reverse【 】

flex-wrap:

nowrap |【（默认）：不换行】
wrap |【换行，第一行在上方】
wrap-reverse |【换行，第一行在下方】

justify-content:

flex-start|【类似左对齐】
flex-end| 【右对齐】
center | 【居中对齐】
space-between|【两端对齐，项目之间的间隔都相等】
space-around |【每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍】

align-items:

flex-start |【交叉轴的起点对齐，向上对齐】
flex-end | 【交叉轴的终点对齐】
center | 【交叉轴的中点对齐】
baseline | 【项目的第一行文字的基线对齐】
stretch | 【如果项目未设置高度或设为auto，将占满整个容器的高度。】

align-content:

flex-start |【与交叉轴的起点对齐】
flex-end | 【与交叉轴的终点对齐】
center | 【与交叉轴的中点对齐】
space-between |【与交叉轴两端对齐，轴线之间的间隔平均分布】
space-around | 【每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍】
stretch | 【（默认值）：轴线占满整个交叉轴】

项目属性；不起作用的属性，float，clear，column，vertical-alige
有点难先插张图，下次学习