はじめに
2022年に見かけたモダンなCSSの書き方を振り返る
zenn.dev
こちらの記事を読みました。
その中でも以下の2点が興味深かったので実際にjsfiddleで動かしてみました。
- 要素の中央配置
- 1行テキストの左右均等割り付け
jsffidle
解説
要素の中央配置
display: flex;
gap: 10px;
flex-wrap: wrap;
よくあるヘッダーにメニューが複数横並びしているようなやつで試してみました。
ul要素をflexにして、gapで中のli要素同士の間隔10pxにしています。
プログラミングで文字列配列をカンマや特定文字で連結して一つの文字列にする感覚に近くてかなり直感的です。
1行テキストの左右均等割り付け
text-align-last: justify;
「こんにちは」という文字を横幅いっぱいに均等に配置するようにしています。
zennの記事ではテーブルのカラムいっぱいに使うようにしていましたね。
半角スペースで幅を調整しているわけではないのでウィンドウ幅に合わせて横幅が変動する要素でも均等配置を維持できるので見栄えがよいですね。
コメント