2017.10.30

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 要素の左右の 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>
</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 で絶対配置しています。

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

space-betwen で均等配置

margin: auto でロゴを中央に

ボタンは片方のみ配置

`space-betwen` で均等配置

`margin: auto` でロゴを中央に