備えておくと便利!CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin

CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。

CSS FlexboxのSass Mixin

CSS Flexboxの各プロパティがまとめられたSass Mixin

flexboxのブラウザのサポート状況

  • Internet Explorer 11+(10はプレフィックス「-ms-」が必要)
  • Edge 12+
  • Chrome 29+(21-28まではプレフィックス「-webkit-」が必要)
  • Firefox 28+(2-21まではプレフィックス「-moz-」が必要)
  • Opera 17+(15-16まではプレフィックス「-webkit-」が必要)
  • Safari 9+(6.1-8まではプレフィックス「-webkit-」が必要)
  • Android 4.4+(2.1-4.3はプレフィックス「-webkit-」が必要)
  • iOS Safari 9+(7-8.4まではプレフィックス「-webkit-」が必要)

詳しいサポート状況は、下記ページをご覧ください。

まずはCSS Flexboxの各プロパティがベンダープレフィックス付きでまとめられたMixin。
サポートするブラウザに合わせて、ご利用ください。

CSS Flexboxの各プロパティの詳しい説明は、下記が参考になります。

CSS Flexboxの各プロパティの使い方を詳しく解説

CSS Flexboxの各プロパティの使い方を詳しく解説

CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin

CSS Flexboxでレイアウトを実装する際に使用される基本的なグリッドが収録されたSass Mixinです。

ベースのグリッドは12カラムで、classを与えるだけで簡単に利用できます。

デモのキャプチャ

デモページ

グリッドはすべてレスポンシブ対応です。

デモのキャプチャ

デモページ

垂直・水平方向に揃える際のclassも用意されています。

デモのキャプチャ

デモページ

sponsors

top of page

©2024 coliss