display:flexってメニューや横並びだけじゃなく、色々な場面で使える機能だって言う事を思い知らされる洗礼を受けました。
横並びじゃなくて、縦並びでもflexを使った方がいいし、
svg画像のファイルサイズが言うことを効かなくなった場合に、flexが有効だったり、
内部アイテムのセンタリングなんて、もはやflex機能で十分です。
そんなdisplay:flexについての裏技のような使い方について紹介してみたいと思います。
safariブラウザだけ、svgの縦サイズがちゃんとしない件
GoogleChromeで問題なく見えていると思って安心していてはいけません。 SafariやFirefoxでは、思いの外違った見え方をしている場合も少なくありません。 以前から作っていたゲームの中でsvgを使用するケースがあり、その中でsvgオブジェクトの表示位置がズレるという事象が見つかりました。（iPhone及びSafariブラウザのみ） GoogleChromeでは次のように見えていたところ・・・
Safariは次のように見えていました。
これは座標がズレているのではなく、svgのサイズが設定されていないがために発生している表示不具合です。
これを解決するには、親要素にdisplay:flexをつけるだけでいいんです。
上記のように整います。
文字を枠の中心に配置したい件
次のようなコードで、内部の文字や画像を中心に配置したい場合があるとします。<div class='sample'>sample</div><style>.sample{
width:300px;
height:200px;
border:1px solid black;
}
</style>
sample
上記に対しては、cssに次のコードを追加するだけで、中央表示が可能になります。
※黄色い文字が追加箇所です。
<div class='sample'>sample</div><style>.sample{
width:300px;
height:200px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center;
}</style>
sample
縦並びでもflexが便利な件
リストで並ぶ項目に対して、display:flexを適用しておくことで、並びの位置していや、隙間調整のgap指定が便利にできるようになります。 もはや、リストタグや、テーブルタグよりも使いやすいかもしれませんね。サンプルコード
<ul class='list-view'>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul><style>.list-view{
display:flex;
flex-direction:column;
gap:10px;
border:1px solid black;
padding:5px;
margin:5px;
width:300px;
}
.list-view > *{
list-style:none;
border:1px solid black;
padding:5px;
margin:0;
display:flex;
justify-content:center;
}</style>
サンプル表示
- 項目1
- 項目2
- 項目3
