display:inline-flexで奇麗な見出しが書けた話

2020年5月15日

たまに要望があるのですが、見出しに「1」「2」「3」て数字を入れるパターン。
簡単に言うとこんな感じの物ですね。

1天は人の上に人をつくらず。

2天は人の上に人をつくらず。

の中に数字を縦横中央で配置させ、その右にテキストを配置させるというものですが、
なんとなくdisplay:inline-flexを使ってみたら、
簡単に縦横中央配置の見出しができたので紹介してみます。

何が良いのか、について語ります

ソースをお見せした方が話が早いかもしれません。

html

<h4><span class="number">1</span>天は人の上に人をつくらず。</h4>

css

h4 {
    font-size:20px;
    color: #333;
    margin-bottom:10px;
}
 span.number {
    width:30px;
    height:30px;
    display : -webkit-inline-box;
    display : -ms-inline-flexbox;
    display : -webkit-inline-flex;
    display : inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #338DC9;
    color:#999;
    margin-right:10px;
    color:#fff;
}

ベンダープレフィックスがあるぶんspanが長くなっていますが、この2つの宣言だけで上のようにできるのが楽で良いな、と。

これがdisplay:flexだとこうはいきません。

実際にやってみるとこうなります(ソースは割愛します)。

できあがったもの

1天は人の上に人をつくらず。

ご覧のとおりズレています。

当然といえば当然なのですが、display:flexだと、子要素は横並びにできるのですが、自分自身は横並びにならないんですよね。

その点display:inline-flexは自分自身を横並びにできるからテキストがズレない。という違いです。

なお、border-radiusを使えば、丸にもできます。

1天は人の上に人をつくらず。

という訳でinline-flexを使った配置の紹介でした。

縦横中央配置ってposition:absolute使ったりいくつか方法がありますが、個人的にはflexを使った方法が好きで、私がコーディングすると、CSSの至る所にdisplay:flexが存在しがちです。