タグ

designとflexboxに関するreneyのブックマーク (2)

  • もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends

    CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。 慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。 そこで、今回はCSS Flexboxの使い方を分かりやすくご紹介していきたいと思います。 2021年版:Flexboxの対応ブラウザとベンダープレフィックスまとめ CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱え

    もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends
  • 2021年版:Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends

    IE11は注意が必要! 何かと話題になりやすいInternet Explorerですが、最新のIE 11でもFlexboxに関するバグがいくつか報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方がいいでしょう。 ただし、IEのサポートも2022年6月に終了することが発表されており、これから制作するWebサイトであればIEを最初からサポート外にしてしまう方がいいと思います。 Flexboxのベンダープレフィックス一覧 下記にFlexboxに関連するCSSのプロパティのベンダープレフィックスの記述方法をご紹介しておきます。 すでに、ベンダープレフィックスが必要なバージョンのブラウザはシェアがかなり少なくなってきており、基的にはベンダープレフィックス無しでもほぼ100%に近いシェアをカバーできるものの、古いブラウザでの動作保証もしっかりケアしたいという場合は、ベンダー

    2021年版:Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends
  • 1