フレキシブル レイアウト (Flexbox) はますます人気が高まっており、CSS レイアウトの記述が非常に便利なため、使用する人が増えています。 3 年前に Flexbox の紹介記事 (上、下) を書きましたが、少しわかりにくかったです。今日、チュートリアルを見て、簡単なフォームでFlexboxを説明でき、内容も非常に実用的だと分かりました。 以下では、簡単なフォームレイアウトを学習するのに必要な時間はわずか 10 分です。 1. <form> 要素 フォームでは <フォーム></フォーム> 上記は空のフォームです。 HTML 標準によれば、これはブロックレベル要素であり、デフォルトでは全幅を占めますが、コンテンツがないため高さは 0 になります。 2. フォームコントロール ここで、最もよく使用される 2 つのフォーム コントロールを追加します。 <フォーム> <input type="email" name="email"> <button type="submit">送信</button> </フォーム> 上記のコードでは、フォームに入力ボックス ( 標準によれば、両方のコントロールはインライン ブロック要素であり、つまり、デフォルトでは 1 行に並んで配置されます。 上の図は、ブラウザによるこのフォームのデフォルトのレンダリングを示しています (色を除く)。2 つのコントロールの間に 3 ~ 4 ピクセルの間隔があることがわかります。これは、ブラウザの組み込みスタイルによって指定されています。 3. Flexboxレイアウトの指定 次に、フォームで Flexbox レイアウトを使用するように指定します。 形状 { ディスプレイ: フレックス; } ご覧のとおり、エラスティック レイアウト アイテムにはデフォルトでスペースがないため、2 つのコントロール間のスペースは消えます。 4. flex-grow属性 注目すべき場所が 2 つあります。 (1)エラスティックレイアウトではデフォルトでは項目の幅が変更されないため、2つのコントロール要素の幅は変更されませんでした。 (2)エラスティックレイアウトはデフォルトで左揃えになっているため、2つのコントロールは行の先頭から配置されます。 入力ボックスが現在の行の残りの幅全体を占めるようにしたい場合は、入力ボックスの 入力{ フレックス成長: 1; } 上の画像では、ボタンの幅は変わっていませんが、入力ボックスの幅が現在の行の幅からボタンの幅を引いた幅まで広くなっています。 5. align-itemsプロパティ 少し変更して、ボタンに画像を挿入してみましょう。 <フォームアクション="#"> <input type="email" placeholder="メールアドレスを入力してください"> <button type="button"><svg> <!-- スマイリーアイコン --> </svg></button> </フォーム> ボタンを画像に挿入すると、ボタンの高さが変わり、より高くなりました。この時、とても素晴らしいことが起こりました。 上の写真では、ボタンが高くなり、入力ボックスも自動的に同じ高さになります。 前述したように、エラスティック レイアウトでは、デフォルトではアイテムの幅は変更されませんが、デフォルトではアイテムの高さが変更されます。アイテムの高さを明示的に指定しない場合は、コンテナーの高さ全体がアイテムによって占められます。 この例では、ボタンが高くなり、フォーム要素も高くなり、入力ボックスの高さが自動的に伸びます。 入力{ フレックス成長: 1; 位置合わせ: 中央; }
項目数が多い場合、 形状 { ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 } 上記のコードでは、 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: SQL グループ化により重複を削除し、他のフィールドで並べ替える
>>: Mac で Docker を使用して Oracle をデプロイする方法
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...
CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...
この記事では、centos7 環境でバイナリ インストール パッケージを使用して mysql5.6 ...
問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...
Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...
1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...
目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...
実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...
目次Tomcat でプロジェクトを展開する 3 つの方法プロジェクトをwebappsディレクトリに直...
Ubuntu 18.04、その他のバージョンのUbuntu質問: sudo apt-get ins...
最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価し...
目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...
目次1. ユーザーが作成したスクリプト2. 単語当てゲーム3. ネットワークカードのトラフィック監視...
1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...