CSSのFlexboxで中央にロゴがあって左右にボタンがあるスマホのヘッダーメニューを作る

今更…かもしれませんが、よく見るスマホのヘッダーメニューをFlexboxで作成してみます。Flexboxを使うと要素を簡単でしかも思い通りに配置できるので便利ですね。いくつか方法があるので紹介します。

space-betwen で均等配置


<header class="header">
  <div class="button">
    <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
  </div>
  <h1 class="logo">LOGO</h1>
  <div class="button">
    <i class="fa fa-fw fa-search" aria-hidden="true"></i>
  </div>
</header>

ボタンのアイコンにはFontAwesomeを使っています。


.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .8em 1.2em;
}
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

space-between でボタンとロゴを均等配置します。また、align-items: center でボタンを上下中央に配置しています。

margin: auto でロゴを中央に


<header class="header">
  <div class="button">
    <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
  </div>
  <h1 class="logo">LOGO</h1>
  <div class="button">
    <i class="fa fa-fw fa-search" aria-hidden="true"></i>
  </div>
</header>

.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding: .8em 1.2em;
}
.logo {
  margin: 0 auto;
}
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.logo 要素の左右の marginauto にすることでロゴ部分を中央配置できます。

ボタンは片方のみ配置


<header class="header">
  <div class="button">
    <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
  </div>
  <h1 class="logo">LOGO</h1>
</header>

.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: .8em 1.2rem;
}
.logo {
  margin: 0 auto;
}
.button {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

ボタンを片方のみ配置したいときはFlexboxの均等配置を使うとロゴ部分が中央表示になりません。そこで、ボタンを position: absolute で絶対配置しています。