🎈 この記事はWP専用です
https://wp.me/pc9NHC-TP
前置き
CSSでよく使う
flexプロパティを使ってみましょう🌟
横並びや中央揃えが
簡単にできるものですね💡
時と場合によりますが
floatより便利で高頻度で使います💕
⬇️こんな感じで使います❣️
index.vue
display: flex;
justify-content: space-between;
align-items: center;
MDN: CSS フレックスボックスレイアウト
FlexboxとはFlexible Box Layout Moduleのことで、
その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
今までNuxtメインで
肝心のHTML,CSSを
あまりやっていなかったので
少しずつやっていきます🌱🙋♀️
作る物
前置きにあった画像の
カード部分です🌟
ネイルデザインの
カードをイメージしてます💅❤️
四角◾️には画像が入ります。
ネイルの名前と画像、
紹介文とタグ、
ネイリストの他の作品も一覧で見る👀
といった感じにしています。
⬇️リンク先
ボタンを押すとネイリストのネイル一覧
同じくカードを押すしてもネイル一覧
タグを押すとタグに該当するデザインの一覧
構成
では構成を考えていきましょう🤔💭
まずはディレクトリ 、コンポーネントから。
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-TP