Question

我希望实现这一点：.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>

Codepen

Answer 1

只需添加margin-left：auto;

.right {
  margin-left:auto;
}

Answer 2

<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>

弯曲中心垂直和水平向右

2 个答案: