css3
Pocket

flexboxのプロパティについての記事を書いたついでにflexboxを使ったCSSのサンプルレイアウトをいくつか作ってみました。Webサイトでよく使われてそうなものをピックアップしてます。

プロパティについての記事はこちら。

【Flexbox】並び順を指定するflexboxのプロパティ

【Flexbox】整列を指定するflexboxのプロパティ

【Flexbox】幅・伸縮率を指定するflexboxのプロパティ

あくまでサンプルなので、プレフィックスを付けてないですし、最低限のことしかやっていません。参考程度に役立ててもらえればと思います。

1. ヘッダー(左にロゴ、右にメニュー)

よくあるロゴと右詰めでメニューを配置しているパターンです。

See the Pen flexbox-header-layout by misumi (@mismith0227) on CodePen.

2. ヘッダー(左にロゴ・メニュー、右に外部リンク)

ロゴとメニューが左側にあり、右にショップとか外部リンクが配置されてるパターンです。

See the Pen flexbox-header-layout2 by misumi (@mismith0227) on CodePen.

3. メインビジュアル(テキストは上下左右中央に)

よく見るメインビジュアルのレイアウトです。

See the Pen flexbox-mainvisual by misumi (@mismith0227) on CodePen.

4. 左右分割のメインビジュアル

これもよくみるメインビジュアルのパターン

See the Pen flex-box- split by misumi (@mismith0227) on CodePen.

5. 3カラムの横並び

商品やサービスの特徴を紹介する時によく使われてるレイアウト

See the Pen flexbox-3column by misumi (@mismith0227) on CodePen.

6. 画像とテキストを左右横並び

これも商品やサービスの特徴を紹介する時によく使われてるレイアウトパターンです

See the Pen flex-box-side by misumi (@mismith0227) on CodePen.

7. フッターのメニュー

フッターで中央寄せされているメニュー

See the Pen flex-box- footer-menu by misumi (@mismith0227) on CodePen.

8. フッターのサイトマップ

フッターにあるサイトマップ的なメニュー

See the Pen flex-box- footer-sitemap by misumi (@mismith0227) on CodePen.

Pocket

カテゴリー: タグ: