古いのから新しい記述のFlexboxのMixinを書いた。【Sass】

  • 投稿日:
  • by
  • カテゴリ:

Flexboxも勧告候補になってそれなりになりますが、ブラウザサポートも徐々に最新仕様のものがサポートされてきましたが、古いバージョンのブラウザだとdisplay: box;とか前の記述が必要だったりします。

上下左右中央表示とかFlexbox使えば簡単にできるし、そっちのほうが便利というそんなこんなで最新の仕様から以前の仕様の記述まで対応できるようにFlexboxのMixinを自作しました。

FlexboxのMixin

FlexboxのMixinはGistのほうにありますので、ご興味のある方はお使いください。

e-river / _flexbox.scss

display: flex;/flex-directioプロパティ/align-itemsプロパティ/justify-contentの最新の記述と以前の記述、flex-wrapプロパティ/align-contentプロパティのベンダープレフィックスつきのが出力されます。

使い方

このMixinの使い方ですが、それぞれの引数に指定する値はCSS Flexible Box Layout Moduleと同じです。また、このMixinにはCompassが必要ですので、Compassはインストールしておいてください。

上下左右中央(横並び)

#flex-container {
	@include display-flex();          
	@include flex-direction(row);     
	@include justify-content(center); 
	@include align-items(center); 
}

上下左右中央(縦並び)

#flex-container {
	@include display-flex();          
	@include flex-direction(column);     
	@include justify-content(center); 
	@include align-items(center); 
}

上下中央、左寄せ

#flex-container {
	@include display-flex();          
	@include flex-direction(row);     
	@include justify-content(flex-start); 
	@include align-items(center);  
}

上下中央、右寄せ

#flex-container {
	@include display-flex();          
	@include flex-direction(row);     
	@include justify-content(flex-end); 
	@include align-items(center);  
}

中央表示、下端揃え

#flex-container {
	@include display-flex();          
	@include flex-direction(row);     
	@include justify-content(center); 
	@include align-items(flex-end); 
}

中央表示、上端揃え

#flex-container {
	@include display-flex();          
	@include flex-direction(row);     
	@include justify-content(center); 
	@include align-items(flex-start); 
}

中央表示、高さ揃え

#flex-container {
	@include display-flex();          
	@include flex-direction(row);     
	@include justify-content(center); 
	@include align-items(stretch);
}

ソースコード全文