Flexboxを使ったコードスニペット集 Flexbox Patterns

Flexboxを使ったコードスニペット集を紹介します。

flexboxを使ったコードスニペット集

Flexbox PatternsはFlexboxを使ったコードスニペットを集めたサイトです。

Flexboxを使ったグローバルメニューやサイドバーメニュー、タブ、リストなどよく利用するUIのスニペットが10種類掲載されています。

コピペで簡単に実装することができます。

スニペットで実装できるUI一覧

inputフォーム

Felxboxのインプット
プラス、マイナスボタンで増減するinputフォームです。

タブメニュー

Felxboxのタブ

Flexboxを使ったタブメニューです。よく利用しそうです。

ヘッダー、グローバルメニュー

Felxboxのメニュー

Flexboxでヘッダー、グローバルメニューを実装する方法です。

フォームのフッター

Felxboxのフォーム

フォームの保存、送信ボタンです。保存の進捗状況を表す「Saving…」を表示します。

サイドバーメニュー

Felxboxのサイドバー

Flexboxを使ってサイドバーメニューを実装します。

中央寄せ

Felxboxの中央寄せ

要素を中央寄せにします。

アイコンの中央寄せ

Felxboxのアイコン

アイコンを中央に表示する方法です。

アイコンとテキストのリスト表示

Felxboxのリスト

Flexboxでアイコンとテキストをリスト表示する方法です。

カード

Felxboxのカード

カードを表示します。

カードのグループ

Felxboxのカードグループ

カードを複数表示します。

Flexboxの人気記事

これは便利!Flexboxレイアウトを簡単に実装することができるCSSライブラリ「Flex Layout Attribute」
これは便利!Flexboxレイアウトを簡単に実装することができるCSSライブラリ「Flex Layout Attribute」

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ10選
アドセンス運用に最適なWordPressテーマ10選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

  • Posted on
  • Updated on
  • Views 926