このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
Post on:2021年10月5日
sponsors
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。
flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。
HTMLはシンプルです。
inputとlabelで、チェックボックスとラベルのテキストを実装します。ラジオボタンでも大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo2"> </div> <div class="flex-demo checkbox-input"> <label for="demo3"><b>baseline</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo3"> </div> |
チェックボックスとテキストをdisplay: flex;で横並びに配置し、align-itemで垂直方向の位置を定義します。
※チェックボックスとテキストの並びがマークアップの逆になっているのは、flex-direction: row-reverse;です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.flex-demo { display: flex; gap: 1ch; align-items: baseline; } .--start { align-items: flex-start; } .--center { align-items: center; } .checkbox-input { flex-direction: row-reverse; } |
align-itemプロパティの値は、下記の通りです。
- align-items: stretch;（デフォルト値）
アイテムをコンテナの高さ（または幅）いっぱいに配置。 - align-items: flex-start;
アイテムを先頭にまとめて配置。 - align-items: center;
アイテムを中央にまとめて配置。 - align-items: baseline;
アイテムをベースラインに沿って配置。
参考: flexコンテナ: align-items（アイテムの配置方法）
実際の動作は、下記のデモでご覧ください。
See the Pen
Baseline 🪄: aligning with wrapping content by Adam Argyle (@argyleink)
on CodePen.
元ツイートは、下記より。
Neat use case for baseline alignment and flexbox:https://t.co/tjxeGUus2P
I wanted to align associative content (checkbox in this case) with potentially wrapping content and baseline worked great pic.twitter.com/kRQeZMQVdv
— Adam Argyle (@argyleink) September 27, 2021
sponsors
