ローディング中

display:flex;の注意点。高さが1番高い要素に合わせて自動的に伸びる。

みなさまdisplay:flex;使ってますでしょうか。

僕は使ってます。

使いたいがために、ブロック要素ひとつ増やしてしまうくらい使ってます。

そんな便利なフレックスボックスですが、少しだけ騙されたので共有いたします。

display:flex;の見た目の高さに騙された。

こちらをごらんください。

※すみません。上のデモではなぜか電話のマークを採用してしまいました。電話のマークを押したら上に戻ります。

こんな感じでボタンを押したら上に戻るやつを作成したのですが、

そう、よくあるこんなやつです。

これが、なぜかスマホで押せない!

という現象につまづきました。

上のコードもPCなら押せるんですよ。

シュミレーターなどで試しても押せる。

しかしテスト環境にアップして、実機で触ると押せない。

Why?

という状況に陥りましたが、めっちゃ単純でした。

高さを指定しないと押せない

そうなんです。

上に戻るボタンは中にテキストが入ってなかったんですよね。

backgroundでアイコンも出していたので、要素の高さが0なんです。

※実際にはこんな感じのナビでした

上に戻るボタンのお隣の要素達は、テキストが入ってるからリンクとして機能していました。

ここに騙された。

普通に考えるとそりゃ中身がなけりゃ高さは0です。

しかし、backgroundで出ているアイコンや背景色で、

いかにもボタンが押せるかのような雰囲気でしたので騙されました。

みなさまもお気をつけください。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.