Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用

2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア

[kjtec]

2カラム、3カラム

[tanupig]

“上記タイルレイアウトではすべて同じ高さのボックスを並べていますが、Masonry ー つまり違う高さのボックスを敷き詰めて表示するレイアウトに挑戦しましょう！サンプルのHTMLはタイルレイアウトと同じものを使ってい

[hemispherwhistle]

Flexbox webデザイン css

[takaesu]

メディアクエリーによりmin-widthを設定して、あるpx以上になったらflexを有効にして横並びが適用されるような仕組み

[mkt69]

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をした

[akameco]

便利

[ryusan2000]

flexbox

[qrac_jp]

背景グラデを50%で割るのは思いつかなかった。

[reitanigawa]

一瞬、firefoxと空目して、そっちの方向に進んでいくのか、と思ってしまった。

[takacoco]

“これからのCSSレイアウトはFlexboxで決まり！”

[nakagawax]

★

[hamichamp]

使うことあるかな

[nobuocreate]

メモ