クリックで伸縮するカードレイアウト CSS/JavaScript

HTML / CSS
この記事は約2分で読めます。

どうも上かるびです。

転職してからハードスケジュールでやってきて、最近やっと落ち着いてきました。

爽快感

アウトプットも兼ねてできるだけ技術的な記事を書いていこうと思います。

スポンサードサーチ

クリックで伸縮するカードコンテンツ

See the Pen
JavaScript Usage [ foreach ]
by Hayato Kamiyama (@kami8ma8810)
on CodePen.

学びと解説

際立って取り上げることはないのですが。。。(;^ω^)

flexの初期値

CSSを学び始めた頃はこれが中々覚えられませんでした。。。

flex: 1 1 auto と書いてある場合、初期値は

flex-grow flex-shrink flex-basisとなります。

何かよい覚え方はないものかと考えてみました。

 

どうでしょうか。3回復唱すればバッチリかと思います。

アロー関数

引数がない場合は省略できるのですが、エディター側で設定しているPrettierのせいで自動的にカッコがついてしまってます。

Sassもそうですが、JavaScriptでもできるだけ簡略化して分かりやすい&低用量のコードを書くことを意識し続けたいものです。

1つの記事であまり長く書くと続かなそうなので、今回はこれで終わります。

コメント

タイトルとURLをコピーしました