几种布局方式

1 display:table

使用场景：

1）两个元素要有一样的高

2）元素内的文本垂直居中

display table 可以让元素按照table的样式来进行布局

display:table-cell 在table中的元素相td一样布局。td的高度一样高

.parent{
    display:table;
}
.child{
    display:table-cell;
    vertical-align: middle;
}

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

两个child 的高度不管怎么变，两个的高度始终一样

兼容性：ie8+，高级浏览器

2 text-align: justify

justify

实现两端对齐文本效果。

‘ text-align: justify’ will not work unless the contents of the line are long enough to cause a line-break.

只有多余一行，justify 才有效果。所以需要让grid里面的内容多余一行

how？

1 添加一个after 元素

2 添加一个元素，width:100%,height:0;....

场景：

比如有30个相同大小的block，如何让他们流水式的铺开

参考：http://www.barrelny.com/blog/text-align-justify-and-rwd/

.grid{
    text-align:justify;
}
.grid_item{
    display:inline-block;
    width: 33%;
    text-align: left;
    vertical-align: top;
    margin-bottom: 3.3%
}
.grid:after{
    content:'';
    display: inline-block;
    width: 100%;
}
<div class="grid">
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
    <div class="grid_item"></div>
</div>

3 flexbox

使用场景

1） 元素内容水平、垂直居中

2）自适应宽度

参考：http://www.creativebloq.com/css3/advanced-rwd-layout-techniques-71412175?utm_source=html5weekly&utm_medium=email