display属性
大多数元素的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。注意是控制当前元素的，而不是其内部元素。
none:
- 在不删除元素的情况下隐藏元素，不会保留元素本该显示的空间
- visibility:hidden 会保留元素的空间
block:
- 前后有换行符，如不指定宽度，会尽可能撑满容器
- 高度，行高及顶和底边距都可控制
- 常见块级元素：
div、p、form、header、footer、section等
inline（默认）:
- 前后没有换行符、不撑满容器
- 高，行高及顶和底边距不可改变
- 包裹一些文字而不会打乱段落的布局
inline-block:
- 将对象呈递为内联对象，但是对象的内容作为块对象呈递（准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性）
- 可以实现浮动（float）的效果，如果HTML源代码中元素之间有空格，那么元素之间会产生空隙，使用float不会有空隙；但不能实现float的文字环绕图片
- 如果不设置width和height，会按元素的内容大小显示
- 这一行的高度为该行内最大高度的元素高度，vertical-align属性会影响到元素在垂直方向的对齐方式
list-item:
- 此元素会作为列表显示，如果不设置width和height，每个列表项尽可能撑满容器
flex:
- 详见下文
Flexbox 布局
参考阮一峰的网络日志：
《Flex 布局教程：语法篇》
《Flex 布局教程：实例篇》
display: flex |inline-flex指定Flex布局后，子元素的float、clear和vertical-align属性将失效
几个基本概念： 容器、项目、主轴、交叉轴
容器的属性
flex-direction
- 主轴的方向（即项目的排列方向）
- row | row-reverse | column | column-revers
flex-wrap
- owrap | wrap | wrap-reverse
- 一条轴线排不下，如何换行
flex-flow
- flex-direction属性和flex-wrap属性的简写形式
- 默认值为row nowrap
justify-content
- 项目在主轴上的对齐方式
- flex-start | flex-end | center | space-between | space-around
align-items
- 项目在交叉轴上的对齐方式
- flex-start | flex-end | center | baseline | stretch
align-content
- 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
- flex-start | flex-end | center | space-between | space-around | stretch
项目的属性
order
- 项目的排列顺序，数值越小，排列越靠前
- 整数，默认为0
flex-grow
- 项目的放大比例，0表示如果存在剩余空间，也不放大
- 整数，默认为0
- 如果所有项目的属性都为1，则它们将等分剩余空间；如果一个项目的属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
flex-shrink
- 项目的缩小比例，1表示如果空间不足，该项目将缩小
- 非负整数，默认为1
- 如果所有项目的属性都为1，当空间不足时，都将等比例缩小；如果一个项目的属性为0，其他项目都为1，则空间不足时，前者不缩小
flex-basis
- 在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
- [length] | auto，默认为auto
- 可以设为跟width或height属性一样的值，则项目将占据固定空间
flex
- flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选
- 默认值为 0 1 auto
- none (0 0 auto) 表示无论窗口如何变化宽度不变
- auto (1 1 auto) 表示空间足够时放大，空间不足时缩小
- initial (0 1 auto) 表示空间足够时不放大，空间不足时缩小
- 建议优先使用这个属性，因为浏览器会推算相关值
align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
- auto | flex-start | flex-end | center | baseline | stretch，默认值为auto
- auto 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
多列布局
CSS3多列布局可以自动将内容按指定的列数排列，这种特性实现的布局效果和报纸、杂志排版非常相似。
常用属性如下：
column-width:
auto 默认值，元素多列的列宽由其它属性决定，没有显示设置的情况下，将默认显示一列
[length] 数值和长度单位组成，非负；如果单独使用，容器超出列宽时显示多列，小于列宽时显示一列
column-count:
auto 默认值，表示元素只有一列，依靠浏览器计算自动设置
[integer] 正整数值，定义想要的列数和最大列数，当容器没有足够空间来包含具有指定宽度的列数，元素列数会自动往下计算；如果单独使用，显示固定列数
列数 = (容器宽度 - 列间距)/列宽 向下取整
columns:
column-width和column-count的缩写
column-gap:
normal 默认值，一般情况相当于1em
[length] 浮点数据和单位标识符组成的长度值，非负，常用px、em单位的任何整数值；
如果同时设置了column-width属性，可能会导致列被撑破，使列数减1
column-rule:
定义列之间的边框宽度、样式、颜色，类似border属性，但不占用任何空间位置
[column-rule-width]|[column-rule-style]|[column-rule-color]
默认值分别为 medium | none | 前景色color值
如果column-rule-width宽度超过列间距，列边框就会消失
column-span:
定义一个分列元素中的子元素能跨多少列
none 默认值，表示不跨任何列
all 表示跨所有列，并定位在列的Z轴之上
column-fill:
定义多列中每一列的高度是否统一
auto 默认值，各列的高度随其内容的变化自动变化
balance 各列的高度将会根据内容最多的一列的高度进行统一