flex弹性布局：(1)其容器能调节子节点宽或高，以适应不同屏幕。(2)可以将一个元素当做容器，其子元素自动成为子容器。(3)水平主轴和垂直交叉轴。
设定主轴方向flex-direction：(1)默认row，主轴为水平方向，起点在左边。(2)row-reverse主轴为水平方向，起点在右边。(3)主轴为垂直方向，起点在上面。(4)主轴为垂直方向，起点在下面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.flexTest{
display: flex;
flex-direction: column;
}
.item{
width: 100px;
height: 100px;
margin: 10px;
background: #c3c3c3;
}
</style>
</head>
<body>
<div class="flexTest">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>