はじめに

コーディング作業をしていて、たまに見出しの頭に「1」「2」「3」・・のように数字を入れるパターンの要望があります。

（実際に表現すると下のような感じです）

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

目次

これの何が良いのか？

これの何が良いのかについては、ソースをお見せした方が話が早いかもしれません。

HTML

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

CSS

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

できあがったもの

CSS2つの宣言だけで上のようにできるのでシンプルで良いと感じています。

これがdisplay:flexだとこのように横に並んでくれません。実際にCSSを修正してみると次のようになります。

HTMLに変更は無いため割愛します。

CSS

.test01 {
　font-size:20px;
　color: #333;
　margin-bottom:10px;
}
.test01 .number02 {
　width:30px;
　height:30px;
　background: #338DC9;
　color:#999;
　margin-right:10px;
　color:#fff;
　display : flex; // inline-flex から flex に修正
　justify-content: center;
　align-items: center;
}

できあがったもの

このように、冒頭の見出し部分で改行されてしまいます。

当然といえば当然なのですが、display:flexの場合、その子要素は横並びにできるのですが自分自身は横並びになりません。

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

枠の形状を変えてみる

border-radius:50%を使えば、枠を丸くできます。

.test01 {
　font-size:20px;
　color: #333;
　margin-bottom:10px;
}
.test01 .number03 {
　width:30px;
　height:30px;
　background: #338DC9;
　color:#999;
　margin-right:10px;
　color:#fff;
　display : flex;
　justify-content: center;
　align-items: center;
　border-radius: 50%;
}

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

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