时间戳

首页 > 解决方案 > 第一项在中心，第二项最后在 flex

html - 第一项在中心，第二项最后在 flex

问题描述

我猜这是很常见的问题，但找不到任何解决方案来解决它。

代码是：

<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

应该是这样的：

在此处输入图像描述

first-item将在中间，second-item应该在最后。

我试过的：

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  align-self: flex-end;
}

我怎样才能使用flex或以任何其他方式实现它css？

标签： htmlcssflexbox

解决方案

你可以试试看

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  right: 0;
  position: absolute;
}
<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

推荐阅读