ハロ／ハワユ
amazonプライムデーで散財したいのに欲しいものは軒並みセール対象になっていないDJよろずやです。
皆さんはプライムデーで散財しましたか？
よろずやは10万くらい使いたかったのに何もほしいものがなくて、結局2万→1.6万になっていたとあるものだけ購入しました。
※2020年10月13日時点。まだまだセールは続く。
最近発表されたNVIDIAのGeforce RTX3080のEVGA版とか、11月に販売予定のAMD Ryzenの5000シリーズとか、欲しいのはたくさんあります。
早く買いそろえてパソコン組みたくて仕方がありません。50万くらい散財したい気持ちです。
手取り100万くらいにならないかなと日々星に願っています。(ﾁﾗｯﾁﾗｯ
閑話休題
CSSにdisplay:flexが追加されてから早数年。
商品一覧などのリストを作成するときにinline-blockで実装するとカラム落ちしたり、android対応だとかで切れ散らかした苦労した記憶が、今も鮮明にあります。
display:flexを知らない方に簡単に説明すると、やっとこさレイアウト調整のためのCSSが増えた、といった感じです。
今までの方法だと、floatやinline-block、tableを使用したレイアウト実装が主流でしたが、これは本来のCSSの使い方ではないので、厳密にいうと良くはない構造だなと思っていました。
そのため、flexが増えたことで正しいレイアウトの調整ができるようになった、と言ってもいいんじゃないですかね。知りませんけども。予防線を張っときますけども。
今回のflexはやばいくらいレイアウト調整に特化しているので、下記のことができます。
重宝します。もうflexなしでは生きていけない身体になってしまいました。
※今回はflexを使用した小技集になるので、詳細は説明しません。
| 項目 | できること |
| display:flex | フレックスコンテナを指定する。 |
| flex-direction | 子要素(フレックスアイテム)を横並びにするか、縦並びにするか、逆方向横並びにするか、逆方向縦並びにするかを指定する。 |
| flex-wrap | 子要素を改行せず配置するか、横幅を超えるときは改行するかを指定する。 ※改行しない場合は横幅に応じて各子要素の横幅が自動可変する。 |
| justify-content | 子要素を並べるときの主軸に対する間隔を指定する。 |
| align-items | 子要素を並べるときの交差軸に対する間隔を指定する。 |
軽い説明は以上となります。詳細を知りたい人はググってください。
それではさっそくflexを使用した小技を紹介していきましょう。拍手👏。
flex小技集 其ノ壱
flexを使用した小技は星の数ほどありますが、2,3個ずつ小出しで紹介していきます。
決して今すべて紹介してしまうと記事を書くのが辛すぎるのと、記事のネタが尽きてしまうから、今のうちから記事のネタをストックしたいわけではありません。
よろずや、そこまでずる賢い人間ではありません。
誰よりも自分が大好きなだけです。
カート内商品数バッジの値を縦横中央配置
ECサイトでカートに商品を入れると、カートアイコンに入れている商品数がカウントされますが、●の大きさはそのままで値が可変しても常に縦横中央にすることが可能です。
カートアイコンをrelativeとして、●をabsoluteで配置し、flexで縦横中央になるように指定してあげるだけで、値が変わっても、●に対して中央に自動で移動してくれます。
See the Pen flex.hack – CountLabel by DJ Yorozuya (@dj-yorozuya) on CodePen.
フレックスアイテムが複数あった場合の位置移動
主軸に対する間隔を指定するjustify-contentでは、
子要素を両サイドに寄せ、残りの要素は等間隔に並べるspace-between
各子要素の左右の余白を等間隔に指定するspace-around
等がありますが、”HeaderでロゴとカートはHeaderに対して両サイドに置きたい！でもマイページアイコンはカートに寄せたい！”といった時があります。
手っ取り早いのは、ロゴのブロックと、マイページとカートを内包したブロックを作り、space-betweenで両サイドに移動させることですが、そういうわけにもいかないというときもあります。
そんな時はマイページアイコンにmargin-left:autoを書いてみてください。
右に寄ってくれます。
See the Pen flex.hack – HeaderItemPosition by DJ Yorozuya (@dj-yorozuya) on CodePen.
おわりに
シャニP「よし、楽しく話せたな」パーフェクトコミュニケーション
最近アプリの設計をすることが多くてコーディングから離れているせいか、コードを書く時の誤字がやばかったです。
今回はHeaderにフォーカスした小技を紹介しましたが、次回は商品一覧に使える小技を紹介できればと思っています。
正直コード書くよりもvtuberの配信枠デザイン風の画像作ってる時が一番楽しかったです。
記事は…んー、書きたくないですね。🥺
また今度！
