flexboxでのパーツ作成(タブ・バッジ)IE10~

  • このエントリーをはてなブックマークに追加

グリッドレイアウトには、float, display:table, flexでの対応がありますが、flexboxが主流なので、flexboxでの対応をまとめます。

プレフィックスの調べ方

https://autoprefixer.github.io/ というサイトを使うと、「Can I Use」を参考にベンダープレフィックスをつけてくれます。

タブ風のフレックスボックス

選択されたフレックスアイテムだけを高くします。それぞれのフレックスアイテムは垂直中央寄せしています。

min-heght が指定されていると、IE11でバグが起きてalign-items:flex-endが効かない。これをheightで指定すると直ります。

サンプル

PCで見ると、ホバーしたときにカーソルが変わりますが、クリックには対応していません。。。

タブリスト1
タブリスト2
タブリスト3
タブリスト3

バッジ(アイコンとテキスト)

サンプル

アイコン横のテキスト
バッジ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す