フレックスボックス「アライメントセルフ」が適切にアライメントされていない

Question

私はフレックスボックスイメージカルーセルを作っています。カルーセルフレックスボックスの中に左右のボタンを配置したいので、それらを絶対配置します。私はflex-flow: rowにラッパーを設定したので、ボタンをalign-self: flex-endに設定し、フレックススタートの最初と最後にの行を設定すると、

私は問題をilustrateクイックcodepenを作っ：https://codepen.io/Xgr/pen/RLoWoj

私が間違っているのかについての任意の提案を？

Answer 1

2物事が間違ってここに起こっている：フレックス行項目の

1. align-selfは、そのクロス軸（垂直）に設定されています。

2. 仕様が変更されています。絶対配置された要素に対して、ブラウザ間で矛盾した振る舞いがあります。水平フレックス項目に設定されたときに右それらの回避策を使用することであり、これはすなわち、IE/Safariで動作しないのでけれども、margin-left: auto/margin-right: autoを使用し、フレックス行アイテムを揃える/左に

完璧だleft: 0/right: 0

Updated codepen

Answer 2

.wrapper { 
    position: relative; 
.btn-left { 
    left: 0; 
} 

.btn-right { 
    right: 0; 
}