エスエムティの愉快な仲間たち

こんばんはばさっちです。
flexboxのspace-between使ってますか?

汎用性の高いbox03とかのクラスしてスタイル当てておけば、簡単に横並びになってくれるので使い勝手が良くてすごくお世話になっています。
ただ3列などに並べて、5個しかない場合このようになってしまいます。



こんなときにわざわざmarginなど再指定したりするのめんどくさいですよね?
そんな時はflex要素のafter疑似要素にスタイルを当ててやると簡単に左寄せになってくれます。

.box03::after {
content:"";
display: block;
width:31.5%;
}




簡単ですね?
これも1個スタイルを準備しておけば簡単に使うことができます!
最近はまたコーディングが楽しくなっているので、こういった技を使って時短しちゃいましょう!!