css flex实现斜梯布局

实现效果如下：

工作中需要居中的场景居多，通过设置容器元素的justify-content或者align-items来实现，
这道题要求斜体型布局，是对弹性布局的一个渐入。
实现方式是通过设置项目元素(即子元素)的align-self属性实现。

代码如下：

<div class="container">                  

　　<div class="item1">元素1</div>  

　　<div class="item2">元素2</div> 

　　<div class="item3">元素3</div> 

</div>

<style>

　　.container{

　　　　display: flex;　

　　　　flex-direction: column;

　　　　justify-content: space-between;

　　}

　　.container div {

　　　　 200px;

　　　　height: 50px;

　　　　text-align: center;

　　　　line-height: 50px;

　　}

　　.item1 {

　　　　background: red;

　　　　align-self: flex-start;

　　}

　　.item2 {

　　　　background: green;

　　　　align-self: center;

　　}

　　.item3 {

　　　　background: yellow;

　　　　align-self: flex-end;

　　}

</style>