Vueと共通

【Nuxt.js】Nuxt実践編:Flexboxを使おう!

前置き

CSSでよく使う
flexプロパティを使ってみましょう🌟
横並びや中央揃えが
簡単にできるものですね💡

時と場合によりますが
floatより便利で高頻度で使います💕

⬇️こんな感じで使います❣️

MDN: CSS フレックスボックスレイアウト

FlexboxとはFlexible Box Layout Moduleのことで、
その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。

日本語対応!CSS Flexboxのチートシートを作ったので配布します

今までNuxtメインで
肝心のHTML,CSSを
あまりやっていなかったので
少しずつやっていきます🌱🙋‍♀️


作る物

前置きにあった画像の
カード部分です🌟

ネイルデザインの
カードをイメージしてます💅❤️
四角◾️には画像が入ります。
ネイルの名前と画像、
紹介文とタグ、
ネイリストの他の作品も一覧で見る👀
といった感じにしています。

⬇️リンク先
ボタンを押すとネイリストのネイル一覧
同じくカードを押すしてもネイル一覧
タグを押すとタグに該当するデザインの一覧


構成

では構成を考えていきましょう🤔💭
まずはディレクトリ 、コンポーネントから。

ディレクトリ

⬇️アトミックデザインや
分け方についてはこちら
【Nuxt.js】Nuxt番外編:
アトミックデザインにおけるフォルダの分け方と
サンプル集

他にもいくつか書いているので
ブログ内で検索してみてください🔍

directory

components/
--| molecules/
----| ListItemNail.vue

pages/
--| index.vue

普通はorganismsのListNail.vueで
並べて表示させるのですが、
今回はCSSがメインなので、
カードをindex.vueにimportして
そのまま表示させてしまいましょう🍀


ListItemNail.vue

完全に好みでネイルにしてますが💅
お好きな物でOKです🙆‍♀️

青い四角で囲った部分

ネイル画像の紹介文と
それに合うタグで
ひとまとまりですね。

全体をdivで覆いflex
直下の画像とテキストを
横並びにしましょう💡

3つの要素が縦並び

青い四角の部分を挟んだ
Nameと一覧ボタンが
縦に並んでいるので
こちらもflex

ではありません🤭
ブロック要素を
並べれば良いだけです💫

Nameはh1,
buttonはbuttonタグです❗️


Let's try!

今までのヒントを元に書いてみましょう✍️
paddingwidthは大体でOKです🙆‍♀️

ただ、紹介文とタグの部分は
横幅をflexpx指定してみましょう!

CSS部分だけでなく、
v-forなどもやりたい!
という方はぜひ
そこまでやってみてください🔥💪

flexが分からなくなった時は、
どこに当てれば良いのかを
もう一度みなおして見ましょう👀

大ヒント

構成が分からない😭
という方はこちらをご覧ください🍀

nuxt-linkなどが分からなければ
一旦divなどでもOKです🙆‍♀️
imgはできればdivに擬似要素で
background-imageが良いのですが
今回は分かりやすくimgにしています。


答え

flexをつける部分を確認しましょう✨👀
flex: 0 1 258px;
flex: flex-grow flex-shrink flex-basis;
で、拡大比率、縮小比率、基本の幅です。
初期値が
flex: 0 1 auto;
なのでpx指定をしたい場合は
このように記載します。

flex以外でいうと…
カード全体がリンクになります。
カード自体はliタグにしたいので
nuxt-linkliタグをつけています。


まとめ

いかがでしたか?💡
私はflexを勉強しているうちに
ブロック要素のことを忘れて
要素全体を覆うdivに無駄に
flex, flex-directionをつけてしまう、
ということがありました😂

そういったところも含めて
学んでいただけると嬉しいなと思っております❤️
記事の希望などがあればぜひ教えてください!

-Vueと共通
-,

© 2024 aLiz Nuxt