[问题探讨]css flex实现斜梯布局-面试题

一道面试题：css flex实现斜梯布局

1，结果如下图：

2，试题亮点：

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

3，代码如下：

<div class="container">
  <div class="item1">元素1</div>
  <div class="item2">元素2</div>
  <div class="item3">元素3</div>
</div>

.container {
  display: flex;

 .item1 {
   align-self: flex-start;
 }

 .item2 {
   align-self: center;
 }

 .item3 {
   align-self: flex-end;
 }    
}