【Flexbox】ヘッダーでよくあるレイアウトは height / font-size / padding を使い分けると上手くできる [IE10対応]

001

Flexboxは大変便利ですが、万能ではありません。しかしCSSを細かく調整することで、その力を引き出すことができます。

ただのデモのため、ブラウザ幅が小さいと崩れます。

 

1つ目のレイアウト

  • 全体に line-height: 1; を指定して、無駄スペース削除
  • 全体の高さを指定(100px)
  • align-items: center; で天地中央揃え
  • ロゴブロックのフォントサイズを0

 

2つ目のレイアウト

  • 背景、画像、リンクブロックと全ての要素が異なるため、高さ指定はしない方が楽
  • 「MENU」には padding を指定し、背景を確保した上でテキストを天地左右中央へ配置
  • align-items: center; で天地中央揃え
  • ロゴブロックのフォントサイズを0

 

3つ目のレイアウト

  • 全体の高さを指定(100px)
  • ブロックごとに align-items: center; を指定して、天地中央揃え
  • ロゴ横のテキストは align-self: flex-end; を指定し、ロゴとボトムを揃えている
  • ロゴブロックのフォントサイズを0

 

4つ目のレイアウト

  • 全体の高さを指定(150px)
  • 各要素にフレキシブルレイアウトを適用できるよう、細かくブロック分けする
  • 右側ブロックは上下をリストタグで分け、justify-content: flex-end; を指定
  • ロゴブロックのフォントサイズを0

 

参考サイト

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