【Flexbox】基本操作と実務で使えるレイアウトスタイルまとめ [IE10対応]

001

本記事に改行(flex-wrap)の記述はありません。

先日、IE10以下切り捨て案件のコーディングを担当し、Flexboxを要所で使用しました。そろそろ実務で使えるようになってきたので、必要な情報をまとめます。

ベンダープレフィックスは? gulpで自動化しましょう。

【gulp】Webサイトコーディングを効率化する、必要最小限4つのプラグインの導入手順

目次

検証済みブラウザとOS

  • IE 10~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan

 

Flexboxの主なレイアウト

002

共通HTML

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

 

ヘッダーで使えるレイアウト

003

左右振り分け

 

均等に振り分け

 

左側に1つ、右側に複数

 

左側に複数、右側に1つ

 

左右に複数振り分け

 

左右に複数振り分けて段あり

 

ボックス並列で使えるレイアウト

004

左の横幅固定、右の横幅可変

 

左の横幅可変、右の横幅固定

 

左右とも可変

 

左右固定、中は可変

 

左と中は固定、右は可変

 

3カラム全て可変

 

005

余白を均等配置

 

左右以外に余白を均等配置

※HTMLは「余白を均等配置」と同じ

 

要素を並列させてコピーライトのみ下部へ

 

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