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

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 つあります。

(1)エラスティックレイアウトではデフォルトでは項目の幅が変更されないため、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 を応援していただければ幸いです。

<<:  SQL グループ化により重複を削除し、他のフィールドで並べ替える

>>:  Mac で Docker を使用して Oracle をデプロイする方法

推薦する

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

MySQL Workbench の使い方チュートリアルの詳しい説明

目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...

CSSレイアウトにおけるフロート属性と位置属性の違い

CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...

Centos7 環境でバイナリ インストール パッケージから mysql5.6 をインストールする方法の詳細な説明

この記事では、centos7 環境でバイナリ インストール パッケージを使用して mysql5.6 ...

ESXI の仮想マシンにワークステーションをインストールするときに発生するネットワーク障害の解決策

問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...

Dockerイメージ内のファイルを表示する方法

Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

tomcat デプロイメント プロジェクトの実装と IDEA との統合

目次Tomcat でプロジェクトを展開する 3 つの方法プロジェクトをwebappsディレクトリに直...

初心者向けのHTMLタグネストルールの詳細なまとめ

最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価し...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

Linux ユーザー スクリプトの作成/推測ゲーム/ネットワーク カード トラフィック監視の紹介

目次1. ユーザーが作成したスクリプト2. 単語当てゲーム3. ネットワークカードのトラフィック監視...

MySQL データベース グループ クエリの group by ステートメントの詳細な説明

1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...