将元素的精确位置与 Flexbox 对齐答案

【问题标题】：Align element exact location with Flexbox将元素的精确位置与 Flexbox 对齐
【发布时间】：2021-10-30 13:13:54
【问题描述】：

我在将元素与 flexbox 对齐时遇到问题。我知道如何在中心、右侧或左侧对齐元素。但我想要做的是将元素对齐距离右边框仅 30% 的位置。我们如何使用 flexbox 控制元素和容器边缘之间的精确距离？类似于引导程序的偏移量？

我见过一些技巧，所有元素都对齐到 be flex start 和最后一个元素有 margin-left: auto.. 但它只对齐到最右边。

我尝试设置 margin-right: 30% 但在移动设备上它会导致其他元素左对齐的问题。

.container {
  display: flex;
  height: 50px;
}

.aligned {
  margin-left: auto;
  margin-right: 30%;
}

<div class="container">
  <div class="aligned">
    <button>Click me</button>
  </div>
</div>

【问题讨论】：

我尝试设置 margin-right: 30% 但在移动设备上它会导致其他元素向左对齐的问题。这是什么意思？
当我缩小屏幕尺寸时，我不希望它一直将链接向左对齐，移动设备的右侧有很多空白可以填充，它保留空间并推动左侧的元素。
我无法重现您想说的内容。如果您可以添加 sn -p 来重现此问题。

标签： html css flexbox

【解决方案1】：

如果您想将元素保留在文档流中，请使用相对定位。

如果可以从文档流中移除元素，请使用绝对位置。

.container {
  display: flex;
  height: 50px;
  border: 1px solid black;  /* demo purposes only */
}

.aligned {
  position: relative;
  left: 70%;
  transform: translateX(-50%);
}

<div class="container">
  <div class="aligned">
    <button>Click me</button>
  </div>
</div>

【讨论】：

【解决方案2】：

在 flexbox 内的元素中 - 使用position : absolute ;（如果您希望它在任何情况下都位于左侧的 30% 处）。并使用这个 left : 30% ; 。（您也可以使用 margin-left : 30% ; ，因为 left 在相对位置上无法正常工作）。

【讨论】：