前置き
CSSでよく使う
flexプロパティを使ってみましょう🌟
横並びや中央揃えが
簡単にできるものですね💡
時と場合によりますがfloat
より便利で高頻度で使います💕
⬇️こんな感じで使います❣️
1 2 3 |
display: flex; justify-content: space-between; align-items: center; |
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!
今までのヒントを元に書いてみましょう✍️padding
やwidth
は大体でOKです🙆♀️
ただ、紹介文とタグの部分は
横幅をflex
でpx
指定してみましょう!
CSS部分だけでなく、v-for
などもやりたい!
という方はぜひ
そこまでやってみてください🔥💪
flex
が分からなくなった時は、
どこに当てれば良いのかを
もう一度みなおして見ましょう👀
大ヒント
構成が分からない😭
という方はこちらをご覧ください🍀
nuxt-link
などが分からなければ
一旦div
などでもOKです🙆♀️img
はできればdiv
に擬似要素でbackground-image
が良いのですが
今回は分かりやすくimg
にしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <nuxt-link class="list-item list-item-nail" tag="li" to="/nails/test1" > <a class="container"> <h1>{{ name }}</h1> <div class="infos"> <img class="img" src="" alt=""> <div class="txts"> <p class="txt"> {{ text }} </p> <p class="tags"> <nuxt-link v-for="tag in tags" :key="tag" to="/" class="tag" > {{ tag }} </nuxt-link> </p> </div> </div> <button class="button"> 一覧を見る </button> </a> </nuxt-link> </template> |
答え
flex
をつける部分を確認しましょう✨👀flex: 0 1 258px;
はflex: flex-grow flex-shrink flex-basis;
で、拡大比率、縮小比率、基本の幅です。
初期値がflex: 0 1 auto;
なのでpx指定をしたい場合は
このように記載します。
flex
以外でいうと…
カード全体がリンクになります。
カード自体はli
タグにしたいのでnuxt-link
にli
タグをつけています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<template> <nuxt-link class="list-item list-item-nail" tag="li" to="/nails/test1" > <a class="container"> <h1>{{ name }}</h1> <div class="infos"> <img class="img" src="" alt=""> <div class="txts"> <p class="txt"> {{ text }} </p> <p class="tags"> <nuxt-link v-for="tag in tags" :key="tag" to="/" class="tag" > {{ tag }} </nuxt-link> </p> </div> </div> <button class="button"> 一覧を見る </button> </a> </nuxt-link> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'ListItemNail', components: { }, data () { return { name: 'ネイルデザインの名前', text: 'ネイルデザインの紹介文', tags: ['秋冬', 'ブラウン', 'ワイヤー'], } }, }) </script> <style lang="scss" scoped> .list-item-nail { border-radius: 16px; padding: 10px; > .container { width: 100%; max-width: 360px; margin: auto; > .infos { display: flex; justify-content: space-between; align-items: flex-start; > .img { width: 40px; height: 40px; } > .txts { flex: 0 1 258px; } } > .button { display: flex; justify-content: center; align-items: center; padding: 0 24px; border-radius: 68px; } } } </style> |
まとめ
いかがでしたか?💡
私はflex
を勉強しているうちに
ブロック要素のことを忘れて
要素全体を覆うdiv
に無駄にflex
, flex-direction
をつけてしまう、
ということがありました😂
そういったところも含めて
学んでいただけると嬉しいなと思っております❤️
記事の希望などがあればぜひ教えてください!