さぁ!検索しよう!

CSS3のFlexboxで、3つの要素が左端・中央・右端に配置されたスマートフォンサイト用のヘッダーレイアウトを作る方法です。

DEMO

HTML

.left-btnを左端、.logoを中央、.right-btnを右端に配置します。

<header class="header">
  <div class="left-btn"><i class="fa fa-bars fa-lg"></i></div>
  <div class="logo">LOGO</div>
  <div class="right-btn"><i class="fa fa-search fa-lg"></i></div>
</header>

CSS

* {
  box-sizing: border-box;
}

body {
  color: #fff;
  margin: 0;
  padding: 0;
}

.header {
  background: #16A6B6;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 5px;
}
.header .left-btn,
.header .right-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 44px;
  width: 44px;
}
.header .logo {
  font-weight: bold;
}

CSSのポイントは以下の通りです。

1. 子要素を横並びに

親要素の.headerdisplay:flex;を指定し、子要素を横並びにしています。

更に、 justify-content:space-between;で3つの要素を左端、中央、右端に、align-items:center;で上下中央に配置しています。

小要素を横並びにするコード

.header {
  background: #16A6B6;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 5px;
}

小要素を横並びにした結果

flexheader

2. アイコンを上下左右中央に配置

.left-btn,right-btnにもdisplay:flex;を指定することで、中のアイコンに対してFlexboxレイアウトが適用されるようにしています。
更に、align-items:center;でアイコンを上下中央に、justify-content:center;で左右中央に配置しています。

アイコンを上下左右中央に配置するコード

.header .left-btn,
.header .right-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

アイコンを上下左右中央に配置した結果

flexheader2


以上で、Flexboxで、スマートフォンサイト用のヘッダーレイアウトを作る方法を終わります。