1、初始样式如图一,要求呈现图二效果
//html 结构如下
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
- align-items 属性为弹性容器内的项目指定默认对齐方式。
- 提示:请使用每个项目的 align-self 属性来覆盖这个 align-items 属性。
- align-self 属性指定弹性容器内所选项目的对齐方式。
- 注意:align-self 属性将覆盖弹性容器的 align-items 属性。
.box{
width: 200px;
height: 200px;
border-radius: 23px;
background-color: aquamarine;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
}
.item{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: #333;
margin: 5px 0;
}
.box>.item:last-child{
background-color: red;
align-self: flex-end;
}