[B! flexbox] ten-gallon-Mouseのブックマーク

FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」

1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メインコンテンツ/フッターを1カラムで揃えたパンケーキスタイル、なつかしのHoly Grailレイアウトやカードを並べたUIなどよく見かけるレイアウトが揃えられています。例えばこのようなカードを並べたようなレイアウトはかなり使われている印象ですね。 CSSをよく学んでおられる方には不要だと思いますが、そうでない方には結構有益なプロジェクトサイトではないかなぁと思います。 1-Line Layouts*

ten-gallon-Mouse 2020/07/13

リンク

FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ

FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用するフォールバックと古いブラウザのサポート CSS GridまたはF