フレックスボックスによる横並びメニューのレイアウト指定方法

前提・実現したいこと

HTML5、CSS3についてご相談させてください。
無知かつ不束者で申し訳ございませんが、ご教示いただけましたら幸いです。

横並びメニューに対し、CSSによるレイアウト調整を行っています。要件は以下の通りです。

・li要素で横並びメニューを作成
・メニューは画面に対し左右中央揃え
・メニューアイテムのテキストは上下中央揃え
・メニューアイテムは等間隔で余白あり

発生している問題・エラーメッセージ

li要素がブロックレベルのため、テキストの上下中央揃えは指定できない。
また、数値で余白を指定する中央揃えといったテクニックもあまり使用したくない。
CSSのレイアウトのお作法を知らず、本要件を実現するのに最もシンプルで
一般的と思われるレイアウト指定方法を知りたい。

該当のソースコード

HTML
1<head>
2<style>
3ul {
4	display:flex; /* 横並び */
5	justify-content: center; /*　画面に中央揃え */
6}
7li {
8	list-style-type: none; /* 箇条書きマーカー除去 */
9	vertical-align: middle; /* テキストを上下中央揃え　※ブロックレベルには効かない */
10	border: solid 1px #000; /* 罫線 */
11	width: 100px; /* 幅100px */
12	height: 50px; /* 高さ50px */
13	margin: 10px; /* 外側余白10px */
14}
15</style>
16</head>
17<body>
18<ul>
19		<li><a href="">facebook</a></li>
20		<li><a href="">twitter</a></li>
21		<li><a href="">instagram</a></li>
22</ul>
23</body>
24

試したこと

li要素をdisplay:table-cellにすると上下中央揃えができるものの
ul要素(親要素)をdisplay:flexにしたことにより（？）上下中央揃えが適用されなくなる。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答3件

CSS
1li {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout#Alignment_Properties

投稿2020/03/11 09:13

x_x

総合スコア13749

ahakat

2020/03/12 01:13

ご指定頂いた方法で実現できました。大変ありがとうございます。フレックスアイテムであるli要素に対し、更にフレックスコンテナ化する属性を与えるという方法は全く思いつきませんでした。圧倒的に理解不足なため、もっと勉強します。

行動規範の内容に同意します

flexを使うならalign-itemsをcenterにすればよいのでは？

投稿2020/03/11 08:02

rjunakc

総合スコア368

ahakat

2020/03/12 01:08

li要素をさらにdisplay:flexとし、ご教示いただいたalign-itemsをcenterにすることで実現できました。大変ありがとうございます。

行動規範の内容に同意します

ベストアンサー

line-heightでテキストの中央揃え行うのはよく使うので覚えておくことをお勧めします。line-heightはliの高さと同じに設定してください。

css
1li {
2    list-style-type: none; /* 箇条書きマーカー除去 */
3    border: solid 1px #000; /* 罫線 */
4    width: 100px; /* 幅100px */
5    height: 50px; /* 高さ50px */
6    margin: 10px; /* 外側余白10px */
7
8    /* 以下追加 */
9    text-align: center;
10    line-height: 50px;
11}

追記
align-itemsはflexコンテナ直下の子要素であるflexアイテムにのみ有効であるため、liに再度display:flexを適用させればテキストもalign-itemsとjustify-contentで上下中央揃えにすることも可能です。

投稿2020/03/11 07:53

編集2020/03/11 09:02

soliste16

総合スコア757

ahakat

2020/03/12 01:07

迅速なご回答をありがとうございます。当方の理解不足により回答が遅れ申し訳ございません。いずれの方法においても要件を実現できました。大変ありがとうございます。変更に強いコードにすべく、追記頂いたli要素をdisplay:flexとしalign-items:centerにより対応する事としました。本件の趣旨とは異なりますが、一点疑問があり、お時間があればご教示いただきたいです。 li要素をdisplay:table-cellとした場合、vertical-align: middleによってテキストを縦位置中央揃えに出来ました。しかしこれは、ul要素(親要素)をdisplay:flexとしていない場合に限るように見られます。フレックスアイテム化された要素(li要素)においては、一部プロパティが無効化されるなどフレックスコンテナ側(ul要素)からの干渉を受ける、という理解で間違いないでしょうか？

soliste16

2020/03/12 02:13 編集

フレックスアイテムとなる要素に対して別のレイアウト方法を適用したときにどのように動作するのかは、フレックスの仕様として事前に定義されています。以下にtable-cellを指定した要素の親要素にflexを指定した場合テーブル関連の機能が失われると記載されています。基本的には質問者さんが仰ってる見解でよろしいかと思います。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox

ahakat

2020/03/12 02:23

勉強不足ですみません。明文化されていたのですね。次回からはドキュメントをもう少し読み込んで質問させていただきます。大変ご親切にありがとうございました。

行動規範の内容に同意します

あなたの回答