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

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

僕は使ってます。

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

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

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

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

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

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

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

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

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

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

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

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

Why?

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

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

そうなんです。

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

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

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

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

ここに騙された。

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

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

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

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

コーダー

yu.kanazawa

シンガー、俳優とクリエイティブな活動をしながら、アルバイト、会社員、ニート、個人事業主経て株式会社awesomeに所属。関わる人に楽しさを提供する事を信条に掲げ、0ベースからビジネスを創れるように、奮闘中です。

他の投稿を見る →