柔性中心垂直向右水平移动
问题描述:
我想达到这个目的:.right
必须垂直于中心对齐,但必须像下图一样放置在.wrap
的末端。柔性中心垂直向右水平移动
这里是我的代码:
.wrap {
display: flex;
box-shadow: 0 0 0 1px black;
height: 400px;
align-items: center;
}
.wrap > * {
box-shadow: 0 0 0 1px black;
padding: 20px;
}
.right {
align-self: flex-end;
}
<div class="wrap">
<div class="left">1</div>
<div class="nextToLeft">2</div>
<div class="right">3</div>
</div>
答
只需加保证金左:自动;
.right {
margin-left:auto;
}
答
<html>
<head>
<style>
.wrap {
display: flex;
box-shadow: 0 0 0 1px black;
height: 400px;
align-items: center;
justify-content: space-between;
}
.wrap > * {
box-shadow: 0 0 0 1px black;
padding: 20px;
}
.nextToLeft {
margin-right: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">1</div>
<div class="nextToLeft">2</div>
<div class="right">3</div>
</div>
</body>
</html>