2019.01.16 野村 健次(社長)

flexを使ってボタンを並べ、文字は上下中央に配置。

flexを使ってボタンを並べ、文字は上下中央に配置。
もちろんボタンは文字だけでなく、ブロックで反応し、レスポンシブ対応させ、 文字がフローしそうになったら、よしなに上下に広がってくれる。IE11も対応!

当たり前そうで、なかなか難しいこのレイアウト。
悩んだので、皆様の役に立つようにここに解説致します。

まず、

<ul class="navi">
	<li><a href="#"><span>一行の文字</span></a></li>
	<li><a href="#"><span>一行の文字</span></a></li>
	<li><a href="#"><span>一行の文字<br>二行の文字</span></a></li>
	<li><a href="#"><span>一行の文字<br>二行の文字</span></a></li>
	<li><a href="#"><span>一行の文字<br>二行の文字<br>三行の文字</span></a></li>
</ul>

と、このようにhtmlを書きます。
ポイントは、aタグの中に、span で文字を囲っている事です。

cssは下記のように書きます。

.navi { display: flex; list-style-type: none; }
.navi li { min-height: 80px; height: auto!important; height: 80px; text-align: center; line-height: 1.2; flex: 1 1 25%; }
.navi li+li { margin-left: 1px; }
.navi li a { display: flex; width: 100%; height: 100%; font-weight: bold; font-size: 16px; color: #fff; background-color: skyblue; align-items: center; }
.navi li a span { flex: 1 1 100%; padding: 0.5em; }

【解説】

1.まず、.navi に display: flex; を書きます。これが基本です。
 list-style-type: none; は リストのマークを表示しない 設定です。

2.次の .navi li (子要素)に、text-align: center; で文字を左右センターに。line-height: 1.2; で高さを1.2に調整。
 そして、flex: 1 1 25%; を明記します。 この設定は順番に、延びる比率、縮む比率、基準の大きさ。となります。
 今回は5つ並んでいるので、基準の大きさは25%になります。本当であれば、flex: 1 1 calc(100%/5); とcalcを使いたかったのですが、IE11で崩れてしまうので断念しました。
 height 要素は、ハック的ですが、この書き方で、文字が上下にフローしそうになった時に自動的に広がってくれます。

3. .navi li+li { margin-left: 1px; } こちらは、li要素の2番目から左に1px空ける。という意味です。

4. 次がポイントですが、.navi li a 要素に対して、また、display: flex; を掛けています。こうする事で、span要素も、flexの子要素になるので、 align-items: center; で
  上下センターに持ってくる事が出来ます。もちろん、 width: 100%; height: 100%; で、ボタン全体で押せるようになっています。

5. 最後に、.navi li a span に対して、flex: 1 1 100%; を適用し、左右センターを実現しています。

本当であれば、htmlに余分なspanは書きたくないのですが、これが一番すっきりと書けるのではないでしょうか?
是非、お試しください!

お問合せ CONTACTMORE 

お電話でのお問合せは

03-6661-9934

お気軽にお問い合わせください。

WEBからのお問合せは

お問合せフォーム