Flexboxレイアウトの最もシンプルなフォーム実装

フレキシブル レイアウト (Flexbox) はますます人気が高まっており、CSS レイアウトの記述が非常に便利なため、使用する人が増えています。

3 年前に Flexbox の紹介記事 (上、下) を書きましたが、少しわかりにくかったです。今日、チュートリアルを見て、簡単なフォームでFlexboxを説明でき、内容も非常に実用的だと分かりました。

以下では、簡単なフォームレイアウトを学習するのに必要な時間はわずか 10 分です。

1. <form> 要素

フォームでは<form>要素を使用します。

<フォーム></フォーム>

上記は空のフォームです。 HTML 標準によれば、これはブロックレベル要素であり、デフォルトでは全幅を占めますが、コンテンツがないため高さは 0 になります。

2. フォームコントロール

ここで、最もよく使用される 2 つのフォーム コントロールを追加します。

<フォーム>
  <input type="email" name="email">
  <button type="submit">送信</button>
</フォーム>

上記のコードでは、フォームに入力ボックス ( <input> ) とボタン ( <button> ) が含まれています。

標準によれば、両方のコントロールはインライン ブロック要素であり、つまり、デフォルトでは 1 行に並んで配置されます。

上の図は、ブラウザによるこのフォームのデフォルトのレンダリングを示しています (色を除く)。2 つのコントロールの間に 3 ～ 4 ピクセルの間隔があることがわかります。これは、ブラウザの組み込みスタイルによって指定されています。

3. Flexboxレイアウトの指定

次に、フォームで Flexbox レイアウトを使用するように指定します。

形状 {
  ディスプレイ: フレックス;
}

ご覧のとおり、エラスティック レイアウト アイテムにはデフォルトでスペースがないため、2 つのコントロール間のスペースは消えます。

4. flex-grow属性

注目すべき場所が 2 つあります。

（１）エラスティックレイアウトではデフォルトでは項目の幅が変更されないため、２つのコントロール要素の幅は変更されませんでした。

（2）エラスティックレイアウトはデフォルトで左揃えになっているため、2つのコントロールは行の先頭から配置されます。

入力ボックスが現在の行の残りの幅全体を占めるようにしたい場合は、入力ボックスのflex-growプロパティを1に指定するだけです。

入力{
  フレックス成長: 1;
}

上の画像では、ボタンの幅は変わっていませんが、入力ボックスの幅が現在の行の幅からボタンの幅を引いた幅まで広くなっています。

flex-growプロパティのデフォルトは0です。これは、伸縮せずに元の幅が使用されることを意味します。 1の場合、項目の幅が現在の行の残りの幅全体を占めるように拡大されることを意味します。

5. align-itemsプロパティ

少し変更して、ボタンに画像を挿入してみましょう。

<フォームアクション="#">
  <input type="email" placeholder="メールアドレスを入力してください">
  <button type="button"><svg> <!-- スマイリーアイコン --> </svg></button>
</フォーム>

ボタンを画像に挿入すると、ボタンの高さが変わり、より高くなりました。この時、とても素晴らしいことが起こりました。

上の写真では、ボタンが高くなり、入力ボックスも自動的に同じ高さになります。

前述したように、エラスティック レイアウトでは、デフォルトではアイテムの幅は変更されませんが、デフォルトではアイテムの高さが変更されます。アイテムの高さを明示的に指定しない場合は、コンテナーの高さ全体がアイテムによって占められます。 この例では、ボタンが高くなり、フォーム要素も高くなり、入力ボックスの高さが自動的に伸びます。

align-itemsプロパティはこの動作を変更できます。

入力{
  フレックス成長: 1;
  位置合わせ: 中央;
}

align-itemsプロパティは 4 つの値を取ることができます。

• flex-start: 上端を揃え、高さは伸ばさない
• flex-end: 下端を揃え、高さは伸ばさない
• center: 中央に配置され、高さは伸縮されません
• ストレッチ: デフォルト値、高さは自動的に伸縮されます

項目数が多い場合、 align-selfプロパティを一つずつ設定するのは面倒です。このとき、コンテナ要素 (この場合はフォーム) にalign-itemsプロパティを設定することができ、その値はすべての子項目のalign-selfプロパティに継承されます。

形状 {
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
}

上記のコードでは、 <form>要素にalign-itemsを設定した後、2 つの値を異なる値にしたい場合を除き、コントロールにalign-selfを設定する必要はありません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。