css flex实现斜梯布局-面试题

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

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

1，结果如下图：

一般工作中的场景都是需要居中，通过设置容器元素的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;
 }    
}