コーディングブログ

Coding Blog

Sass(SCSS)レイアウト最強のFlexboxのMixinつくってみた

CSS

ジェネレーターを開いてコードをコピペ。
しかしそろそろその作業も面倒になってきた。だがあのプロパティ量は覚える気にならない。
そうだ、mixinを作ろう。そしたらもうジェネレーターでコピペはいらないぞ。

つくったMixin

trueとfalseを1と0にした。
引数に対応した値を入れて条件分岐させることでプロパティが吐き出される。

個人的にinline-flexの使い道がわからない。
だから入れていない。

使い方

必要なプロパティまでの引数をセットしよう。

▼ ①コンパイル前(横並び、両端配置)

▼ ①コンパイル後

▼ ②コンパイル前(横並び、折り返し)

▼ ②コンパイル後

▼ ③コンパイル前(縦並び、中央寄せ)

▼ ③コンパイル後

いつもお世話になっているジェネレーター

FLEX LAYOUT GENERATOR | フレックス レイアウト ジェネレーター