Help us understand the problem. Copyright © 2007-2020 Tenorshare Co., Ltd. All Rights Reserved. 本業は営業職20年以上のApple製品好きのおっさんブロガーです。 詳しくはプロフィールをご覧ください。, iPhone12Proのサイズ比較/iPhone11ProMaxから変えた理由を徹底解説!, iPhone12の大きさはiPhone11とどう違うか徹底比較と買うべき理由![Pro/ProMax/mini], iPad Pro2020新型A12Z搭載で発表!スペックや5Gは?注目はMagic Keyboard.

2020年3月18日にいきなり発表された新型iPad pro はどのようなものでしょうか?買い替えを検討中の人はスペックや価格が気になると思... iPhone関連のリーク情報は二転三転していますが先日お伝えしているiPhoneSE2は2021年登場かと伝えたばかりですが、やはり今年の3... スーパームーン は昨年の2019年2月20日に日本で観測されましたが、昨年見逃してしまい今度こそ見たいと思っている人もいるのではないでしょう... 毎日使う iPhoneなどのApple製品ですが毎日使っているとiCloudの容量が無料で使える5GBがいっぱいになってきます。 最初は写真... スマホユーザーの方でナビにBluetoothがなく、スピーカーで電話に出る方法が分からずに走行中にいきなり道路の端に止まって電話に出る方にご... iPhoneの純正メモアプリを仕事で簡単に活用して効率UPする方法をレビューしています。使っているけどよくわからない方や初心者の方はメモアプ... iPhoneを家族で使う場合にファミリー共有の機能で写真が見られてしまうのではないか?と心配なあなた?便利だけど本当に大丈夫?と思っています... iPhoneを使っていたら、画面が真っ黒になりぐるぐるが表示されてしまい止まらなくなったら困りますよね。 特にiPhone初心者であればどう... iPhone11ProMax大きさレビュー!サイズはでかい?1ヶ月以上使ってわかった事, iOS13.3でも改善しないWi-Fiが繋がらない/切れる原因はなぜ?解決策はあるの?, カーナビがBluetoothに接続出来ない繋がらない時はスマホの設定から確認しよう!, どちらも今まで表示されていたアプリを下から上へスワイプすれば消えてアプリの再起動ができるんだね, 今までの履歴が削除されてアプリの動きが軽快になるけどログインが必要なサイトは新たにログインが必要だよ, iOS13.3.1でiPhoneのsafariが真っ白になる場合の対策は他のブラウザを使うことです!, iPhoneのsafariが表示されない/Safariが白くなる場合はiPhoneの強制再起動, iOS13.3でiPhoneのSafariが表示されない不具合の報告はどれだけある?. display:flex;の使用時に、主にIE11やsafariでのバグを防ぐためのハック的な内容です。 これまでの経験で何度か起こったバグへの対応方法をまとめました。 アイテム 2.1. flex: 1 0 0%などの指定をする Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。, display プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。, バグを修正するには、flex-flow の値に column は使わず wrap だけにします。ただし、wrap だけを指定するので、flex-flow ショートハンドではなく、flex-wrap プロパティを使っています。, また、writing-mode プロパティを用いることで、column を指定したときと同じように縦に並ぶようにしています。, Flex アイテムで writing-mode プロパティに horizontal-tb を指定して、文字の向きを元に戻しています。, summary や fieldset、button 要素などが Flex コンテナに対応していません。, バグを修正するには、fieldset 要素が Flex コンテナになるのを避けるために、内部に要素を作って Flex コンテナにします。, summary 要素も同様に内部に要素を作り、Flex コンテナにすることでバグを修正できます。, img 要素を Flex アイテムにすると、Flex アイテムの高さと幅が画像そのものの大きさになってしまいます。, バグを修正するには、flex-basis プロパティと同じ値を max-width プロパティに指定します。, ネストされた Flex コンテナ内で overflow プロパティに auto を指定して、スクロールできるようにすると、その要素ではなく Web ページ全体にスクロールバーが表示されてしまいます。, Flexboxの仕様によると、overflow プロパティに visible(デフォルト値)が指定されていると、Flex アイテムの min-height プロパティの値は auto となります。それ以外の場合は 0 が使われます。, つまり、Flex アイテムである .content 要素の overflow プロパティには auto が指定されているため、min-height 値は 0 となります。, しかし、Flex アイテムである .main 要素には overflow プロパティが指定されておらず、デフォルト値である visible が使われます。すると、min-height 値は auto でなりゆきの高さが使われるため、子要素の .content 要素ははみ出してしまうのです。, この挙動を修正するには、Flex アイテムで overflow プロパティの値に visible が指定されている .main 要素の min-height プロパティに 0 を指定します。, Flex アイテムで margin や padding プロパティに % 値を指定すると、垂直方向の値が無視されてしまいます。, バグを修正するには、Flex アイテムの擬似要素 ::before で垂直方向の padding を指定します。, 擬似要素にすることで Flex アイテムではなく、その子要素となるため、バグを回避できます。, FlexコンテナよりもFlexアイテムの幅の合計が長い場合、flex-shrink プロパティの値によって縮小させるかどうかが決まります。, CSS Flexible Box Layout Module Level 1 によると、Flex アイテムは長い英数字文字列などのコンテンツの最小サイズを下回るまで縮小しないという仕様があります。, しかし、以下のブラウザではコンテンツの最小サイズを下回って幅が計算されてしまいます。, その結果、Flex アイテムが Flex コンテナの幅に収まろうとして、潰れてしまいます。, バグを修正するには、Flex アイテムで flex-shrink プロパティに 0、flex-basis プロパティに auto を指定します。, ただし、flex-basis プロパティの初期値は auto なので省略しています。, flex-basis プロパティの値を transition や animation させようとしても、変化しません。, バグを修正するには、flex-basis ではなく代わりに width や height プロパティを使います。, max-width プロパティが指定されていると、justify-content プロパティを使っても Flex アイテムが揃いません。, また、flex-direction プロパティに column を指定している場合は、max-height プロパティとの併用でバグが発生します。, バグを修正するには、max-width プロパティではなく flex プロパティだけで表現するようにします。, flex プロパティのうち、flex-shrink に 1、flex-basis に 25% を指定すれば、max-width に 25% を指定したときと同じ効果になります。, Flex コンテナの flex-direction プロパティに column、align-items プロパティに center が指定されていると、Flex アイテムが Flex コンテナより大きい場合にはみ出てしまいます。, バグを修正するには、Flex アイテムで max-width プロパティに 100% を指定します。また、padding プロパティで余白を作っている場合は box-sizing プロパティに border-box を指定します。, ただし、Flex アイテムで margin プロパティが指定されている場合は、box-sizing プロパティを指定しても効果がないので、margin の代わりに padding プロパティを使いましょう。, Flex コンテナの flex-direction プロパティに column、Flex アイテムの flex プロパティに 1 が指定されていると高さが潰れてしまいます。, 普通は flex プロパティに 1 を指定すると、flex-grow プロパティに 1 が指定されたとみなされ、1 1 0 となります。flex-grow プロパティに 1 が指定されているため、flex-basis プロパティに 0 が指定されていてもスペースいっぱいに広がるので問題ありません。, しかし、flex-direction プロパティに column が指定されている場合は、flex-grow プロパティが無視されて flex-basis だけが評価されます。, バグを修正するには、ショートハンド内の flex-basis プロパティに auto を指定して、コンテンツの高さで判断されるようにします。, Flex コンテナで min-height プロパティが指定されていると、Flex アイテムの高さが計算されません。, バグを修正するには、min-height の代わりに height プロパティを使います。, しかし、.flex-item-main 内のコンテンツが多くなると、途中で背景色が途切れてしまうことがあります。100vh というのはブラウザの高さを表しており、ブラウザの高さよりもコンテンツ量が増えれば背景色が途切れるのも理解できます。, 単に、背景色が途切れるのを解決したいなら、.flex-item-main 要素に .flex-item-container 要素と同じ背景色を指定すればよいです。, ただ、.flex-item-container 部分の高さを基準として絶対配置したりする場合は、正しい高さが必要となるため、min-height の代わりに height プロパティを使う方法では解決できません。, .flex-wapper 要素に flex を指定して入れ子にすると、子要素で min-height プロパティを使ってもバグが発生しません。, ショートハンドの flex プロパティで flex-basis に単位なしの値を指定すると、無視されてしまいます。, 当時の仕様では、flex ショートハンド内の flex-basis 値には単位をつけなければならなかったので、単位がない場合は無視するようになっていました。, 単位は何でもいいのですが、0px だとCSSの圧縮ツールで単位が削除されてしまうため、0% を使うとよいです。, img など固有の高さと幅をもつ要素を Flex アイテムにすると、高さがそのまま Flex アイテムの高さになってしまいます。, つまり、幅は伸縮するのに対し、高さはそのままなのでアスペクト比が崩れてしまいます。, バグを修正するには、Flex アイテムで min-height プロパティに 1px を指定します。, flex-basis プロパティに指定された値が、box-sizing プロパティに border-box を指定しても padding や border が考慮されません。, バグを修正するには、max-width プロパティに flex-basis プロパティと同じ値を指定します。, 他にも、Flex アイテム内に要素を入れ子にして、padding や border プロパティの指定だけ別にしてしまう方法もありますが、max-width プロパティを使った方法の方が簡単ですね。, flex ショートハンドで flex-basis プロパティに calc() を使っても無視されます。, バグを修正するには、flex ショートハンドを使わずに flex-basis プロパティだけ別で指定します。, これで、IE11 は修正できましたが、IE10 の場合はそもそも flex-basis プロパティに calc() が使えないので代わりに width プロパティを使います。, flex-direction プロパティに column が指定している場合、Flex アイテムで margin プロパティに auto を指定しても水平方向が中央揃えになりません。, これは、align-self プロパティの初期値が stretch であるためです。, バグを修正するには、Flex アイテムで align-self プロパティに center を指定するか、Flex コンテナで align-items プロパティに center を指定します。, 現在の仕様では、flex ショートハンドを使ったときの flex-shrink プロパティの初期値は 1 ですが、当時の仕様では 0 になっていました。, 括弧内が現在の仕様です。IE10 の場合は、flex-shrink がすベて 0 になっていることがわかります。, バグを修正するには、Flex アイテムで flex-shrink プロパティに 1 を明示するか、flex プロパティ内の flex-shrink に 1 を指定します。, インライン要素と ::before や ::after 擬似要素が Flex アイテムとして扱われません。, バグを修正するには、Flex アイテムがインライン要素でなければいいので、 display プロパティの値に block や inline-block、flex などを指定します。, flex ショートハンドで !important を指定していると、flex-basis プロパティの値だけ無視されてしまいます。, flex-wrap プロパティに wrap が指定されていると、min/max-width/height プロパティが無視されてしまいます。, Flex アイテムで flex プロパティに1が指定されていると、flex-basis の値は 0 となるため、1行に並んでしまいます。, バグを修正するには、flex-basis にも min-width プロパティと同じ値を指定します。, min-width と max-width プロパティ両方を使用する場合は、flex-basis プロパティに min-width と max-width の範囲内のどこかの値を指定します。flex-basis プロパティに値を指定さえすれば、バグを回避できます。, Flex コンテナを入れ子にすると、align-items プロパティの baseline 値が効かなくなります。, バグを修正するには、入れ子の Flex コンテナで flex の代わりに inline-flex を使います。inline-flex にすると幅がコンテンツの幅になるので、必要な場合は width プロパティに 100% をあわせて指定しておきます。, フリーランスで活動するフロントエンドエンジニアです。ためになるスニペットを書いていきます。著書『今すぐ始めるCSSレシピブック』, "https://placehold.jp/40/d6d6d6/ffffff/700x200.png". display:flex;の使用時に、主にIE11やsafariでのバグを防ぐためのハック的な内容です。これまでの経験で何度か起こったバグへの対応方法をまとめました。, flex: 1 1 auto; と flex: 0 0 固定幅(px指定) ; を横並びでレイアウトする際のバグへの対応です。, これはimgタグのmax-width:100%;が flex: 1 1 auto; を適用させた要素内では上手く効いていないことが原因です。, 私の癖ですが、通常コーディングする際は、imgタグにmax-width:100%;を付けてコーディングをしています。99%がレスポンシブ対応のサイトを制作しているので、imgタグも可変になるようにmax-width:100%;を付けています。, width:100%; だと元の画像サイズ以上に大きくなる場合があるので、max-width:100%;を使用しています。, このバグを防ぐには flex: 1 1 auto; を適用させた要素に、以下のようにwidthの値を追加します。, メインエリア内の画像に width:100%; など画像のwidth指定を行ってもこのバグは解消されます。, これは flex: 0 0 (%指定); の要素のpaddingの分が横にはみ出ている状態です。, box-sizing:border-box;を適用させていても、paddingの分だけが余計にはみ出てしまうのです。, このときは次のように max-width を追加してあげれば、正常に表示されます。, 今回書いた記述を追記したからといって、モダンブラウザでの表示がおかしくなることもないので、念の為書いておくと安心です。.