2.8.6 display:flex
なんだこれ！今までの苦労は何だったのか！
あまりにも簡単に横並びや縦並びが設定できる？
全く便利なもんが現れたなあ！！！
ということで、どれほど便利なのか少しやってみようと思う。
<div>menu1</div>
<div>menu2</div>
<div>menu3<br>
内容<br>
内容２</div>
</div>
.flex_menu {
display:flex;
background-color:silver;
}
.flex_menu > div:nth-child(1) {
background-color:green;
}
.flex_menu > div:nth-child(2) {
background-color:orange;
}
.flex_menu > div:nth-child(3) {
background-color:lime;
}
少しわかり易いように親要素を灰色、子要素を色分けして、親要素にdisplay:flex;と設定してみたら、
のように表示された。縦並びに表示されるところが、flex指定で横並びになった。
「:nth-child()」を使うと、それぞれの子要素を指定して属性を定義できるので、この場合便利である。
中央に配置したい場合は、横方向指定のプロパティ「justify-content」を使い、「justify-content:center」を 親要素のCSSに記述すると、
と表示される。前節のインラインブロックにおいては、div要素間およびli要素間の改行が1文字空白と見なされたが、 flex指定の場合は隙間が無くなっている。 マージンとパディングをしっかりと設定すれば想定通りに表示されることは、逆に好ましいと思える。
それでは、それぞれの要素にマージンとパディングを10pxずつ設定すると、
justify-contentの設定値は５つあり、
| justify-contentの設定値 | 説明 |
| justify-content:flex-start; | 左詰め（初期値） |
| justify-content:flex-end; | 右詰め |
| justify-content:center; | 中央寄せ |
| justify-content:space-between; | 両端配置の均等表示 |
| justify-content:space-around; | 均等表示 |
最後の均等表示にすると、
のようになる。
縦方向はalign-itemsプロパティで設定し、初期値はalign-items:stretchとなっているが、 「align-items:flex-start;」と設定すると、
のように、中の文書に合わせて、要素の縦幅が自動調節される。
align-itemsの設定は４通りあり、
| align-itemsの設定値 | 説明 |
| align-items:stretch; | 一番大きい高さに合わせて要素を広げて配置（初期値） |
| align-items:flex-start; | 上揃えで配置 |
| align-items:flex-end; | 下揃えで配置 |
| align-items:center; | 中央揃えで配置 |
一番下の中央揃えで配置にすると、
となる。様々なバリエーションがあり、利用しやすい。
ところで、上記の少しずつ異なるメニュー表示は、以下のCSSを追加用意することにより、かなり簡潔に記述できる。
justify-content:center;
}
.jus_around {
justify-content:space-around;
}
.align_start {
align-items:flex-start;
}
.align_center {
align-items:center;
}
.child_mp10px > div {
margin:10px;
padding:10px;
}
htmlコード例は以下のようになる。
<div>menu1</div>
<div>menu2</div>
<div>menu3<br>
内容<br>
内容２</div>
</div>
上記は、最後のメニュー表示の例である。少しずつ異なる同じようなスタイルのものを複数表示したい場合、このようにするとコーディングも楽になり、わかり易くなる。
クラス名「child_mp10px」は、親要素は設定せず、子要素のみにマージンとパディングを設定するものである。
わかり易く簡潔に記述することを心掛けたが、書き方は千差万別、他の有用な方法もあるだろう。 日々精進かなあ？
他にも様々な設定があるが、これ以上は他書に委ねたい。
- Samurai Blogの「CSSのFlexboxとは？横並びレイアウトの新定番になるかも！」
- MDN Web Docsの「フレックスボックスの基本概念」
- 無料ホームページ作成クラウドサービスまめわざの「CSSフレックスボックス(display:flex)の使い方」
<ul>,<li>タグを使うこともできるが、<div>タグの場合とほとんど使い勝手は変わらない。 今までの慣れや好みの問題のような気もするが、メンテし易いように、メニューは<ul>を使うというように決めておくのも良いだろう。
displayについては、他にもたくさんあるが、とりあえず、これで終わりとする。必要になればあとで議論することになるだろう。
次は、フロートについて、CSSの基礎パート９である。