このCSSなら簡単!フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置

フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。

flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。

このCSSなら簡単に実装できる!フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置

HTMLはシンプルです。
inputlabelで、チェックボックスとラベルのテキストを実装します。ラジオボタンでも大丈夫です。

チェックボックスとテキストをdisplay: flex;で横並びに配置し、align-itemで垂直方向の位置を定義します。
※チェックボックスとテキストの並びがマークアップの逆になっているのは、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.

元ツイートは、下記より。

sponsors

top of page

©2021 coliss