中心的第一项和最后的第二项[flex]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了中心的第一项和最后的第二项[flex]相关的知识,希望对你有一定的参考价值。

这个问题在这里已有答案:

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

代码是:

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

应该是这样的:

enter image description here

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

我尝试过的:

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

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

我如何使用flexcss的任何其他方式实现它?

答案

你可以试试,

.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>
另一答案

几乎:你只需要在第一个元素上添加一个边距auto

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

.first-item {
  margin: auto;
}
.second-item {
  align-self: flex-end;
}

Codepen demo

以上是关于中心的第一项和最后的第二项[flex]的主要内容,如果未能解决你的问题,请参考以下文章

如何定位动态条目网格行中的第一项和最后一项?

如何比较数字子列表中的第一项,如果重复,比较第二项并选择第二项最小的子列表?

markdown列表

Markdown快速学习效果展示页

经典算法详解斐波那契数列的n项

如何使用一行代码遍历二叉树累加求值?