flex实现三个div上中下布局
⾯试中遇到个样式题，就是⽤flex实现三个长宽相同div的布局，第⼀个在左上⾓，第⼆个⽔平垂直居中，第三个在右下⾓
开始还以为要⽤上中下三个⽗节点分别包住三个⼩div，分别设置三个⽗节点的justify-content属性为flex-start、center、flex-end，再设置align-items属性为flex-start、center、flex-end来实现
后来发现，还有更快的⽅法，就是
1<html>
2<body>
3<div class="content">
4<div class="d1">div1</div>
5<div class="d2">div2</div>
6<div class="d3">div3</div>
7</div>
div中的div居中
8</body>
9<style>
10        .content{
11            display: flex;
12            justify-content: space-between;
13            align-items: center;
14            height: 100%;
15        }
16        .d1,.d2,.d3{
17            height: 100px;
18            width: 100px;
19        }
20        .d1{
21            background-color: aquamarine;
22            align-self:flex-start;
23        }
24        .d2{
25            background-color: coral
26        }
27        .d3{
28            background-color: cornflowerblue;
29            align-self:flex-end;
30        }
31</style>
32</html>
解析：
1.把最外层的⽗节点的justify-content属性设为space-between，三个div就会平均分布在左中右。
2.把⽗节点的align-items属性设为center，让三个div都垂直居中。
3.单独设置第⼀个和第⼆个div的align-self属性，把第⼀个设为flex-start，第三个设为flex-end，就完美实现了
效果如下图：
原创，转载请注明出处

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。