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」
スポンサーリンク
Flexbox – Flexboxを使ったコードスニペット集

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.04.25
  • Views 609