原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
一道面试题：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;
}
}
网友评论