フレックスボックス要素の絶対位置

Question

1280pxの最大幅のコンテナ内で右端の1.5％の絶対値の要素（#header-supporter-cont）（画像を重ねる絶対）を右揃えしようとしています。これは相対的な要素であればこれはかなり簡単ですが、絶対的なものとして、私はこれを達成することができませんでした。サイドノートとして

それはエッジからカウントするので、単純にright: 1.5%を設定するので、私はもともとなかったとして、私は、フレキシボックスでこれをやろうとしている、ページの1280px横の余白の残りの部分と#header-supporter-contのコンテンツを整列しませんエッジに。

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

デモ：

• オリジナル、非フレキシボックス：http://codepen.io/ourcore/pen/ggoebB
• 非機能フレキシボックス：http://codepen.io/ourcore/pen/oBpqqy

Answer 1

、私は2本のペンで見る唯一の違いは、テキストの位置である。flex-direction: column;

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