みなさまdisplay:flex;使ってますでしょうか。
僕は使ってます。
使いたいがために、ブロック要素ひとつ増やしてしまうくらい使ってます。
そんな便利なフレックスボックスですが、少しだけ騙されたので共有いたします。
display:flex;の見た目の高さに騙された。
こちらをごらんください。
※すみません。上のデモではなぜか電話のマークを採用してしまいました。電話のマークを押したら上に戻ります。
こんな感じでボタンを押したら上に戻るやつを作成したのですが、
そう、よくあるこんなやつです。
これが、なぜかスマホで押せない！
という現象につまづきました。
上のコードもPCなら押せるんですよ。
シュミレーターなどで試しても押せる。
しかしテスト環境にアップして、実機で触ると押せない。
Why?
という状況に陥りましたが、めっちゃ単純でした。
高さを指定しないと押せない
そうなんです。
上に戻るボタンは中にテキストが入ってなかったんですよね。
backgroundでアイコンも出していたので、要素の高さが0なんです。
※実際にはこんな感じのナビでした
上に戻るボタンのお隣の要素達は、テキストが入ってるからリンクとして機能していました。
ここに騙された。
普通に考えるとそりゃ中身がなけりゃ高さは0です。
しかし、backgroundで出ているアイコンや背景色で、
いかにもボタンが押せるかのような雰囲気でしたので騙されました。
みなさまもお気をつけください。
