css - flexbox 元素上的绝对位置

Question

我正在尝试右对齐绝对元素 (#header-supporter-cont)(绝对重叠图像)，在最大宽度为 1280 像素的容器内留出 1.5% 的右边距.如果它是一个相对元素，这会很容易，但作为绝对元素，我还没有做到这一点。

作为旁注，我试图在 flexbox 中执行此操作，因为像我最初那样简单地设置 right: 1.5% 不会对齐 #header- 中的内容supporter-cont 与页面其余的 1280px 水平边距，因为它是从边到边计算的。

HTML:

<header id="header">
  <div id="header-cont">
    <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Header%20Image&w=1920&h=200" /></a>
    <div id="header-supporter-cont">
      <div id="header-supporter">
        <div id="header-supporter-text">
          Image text here
        </div>
        <a href="#" target="_blank"><img src="https://www.aexp-static.com/nav/ngn/img/logo_bluebox_1x.gif" /></a>
      </div>
    </div>
  </div>
</header>

CSS:

#header {
  margin: 0;
  width: 100%;
  height: auto;
  position: relative;
}
#header #header-cont a {
  display: block;
}
#header #header-cont a img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
#header #header-cont #header-supporter-cont {
  margin: 0 auto;
  max-width: 1280px;
  margin: 0 1.5%;
  position: relative;
}
#header #header-cont #header-supporter-cont #header-supporter {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: absolute;
  bottom: 20px;
  right: 0;
}
#header #header-cont #header-supporter-cont #header-supporter #header-supporter-text {
  padding-bottom: 5px;
  font-size: 0.75em;
}
#header #header-cont #header-supporter-cont #header-supporter #header-supporter-text span {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
#header #header-cont #header-supporter-cont #header-supporter a {
  display: block;
}
#header #header-cont #header-supporter-cont #header-supporter a img {
  width: 55px;
}

演示:

• 原始的，非 flexbox:http://codepen.io/ourcore/pen/ggoebB
• 无法正常工作的 flexbox:http://codepen.io/ourcore/pen/oBpqqy

Answer 1

尝试改变 flex-direction: column; 的 flex 方向

#header-supporter {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                position: absolute;
                bottom: 20px;
                right: 0;}