positoin:stickyとは

‘position：sitcky’というちょっと便利なcssがあるのです。
javascriptを使わずともスクロール中のコンテンツを指定の場所に留め置くことができます。

用途としては、グローバルナビゲーションをトップに固定したり、コンテンツをトップに止めてどんどん重ねていったりといったことができます。

positoin:stickyが効かないだと？

コンテンツを横並びにするときにY田はflexboxを使います。
なので上記のような記述になります。

すると、どうでしょう？
positoin:stickyが全く聞いていません。

positoin:stickyが効く条件はstickyアイテムが親要素で囲まれていることです。
そして、上記記述では留めておきたいnav（sticky）はflex-containerに囲まれています。

これはどうしたことか…

flex-boxでは高さがそろう

ヨシ、わからないときは検索だ！
ということで検索したのですが、stickyの使い方はすぐにでてくるのですが効かないという情報がなかなか収集できず…

やっと見つけたのがCheat parkさんのこちらのページ。

css position stickyが効かない時の解決策！Flex-box使用時に効かなくなる？

今回はこちらのサイトを参考にしました。

なになに、flex-boxを使うと高さがそろってしまうのでstickyが効かないとな？

で解決方法がalign-items:baselineをflex-boxの親要素に設定するそうです。

ということでやってみたところ、できるにはできたのですが、paddingの要素を無視してy軸の高さがすべてそろってしまう…

align-items:flex-startでは効かんのやろか、って感じでやってみたのが下記のコードです。

わかりやすいように色を付けています。

あからさまにコンテンツの高さが変わってますよね。

もちろんこちらでもstickyは効いています。

結論から申し上げますと、flex-boxで横並びにしたときはalign-itemsを使うことでposition:stickyが効くようになる、
ということでした。