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本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs