新しい CSS display:box プロパティの詳細な説明

新しい CSS display:box プロパティの詳細な説明

1. ディスプレイボックス;

要素にこのプロパティを設定すると、display:inline-block; と同様に、その子要素が同じレベルに配置されます。

2. 子要素には以下のプロパティを設定できます

前提条件: 次のプロパティを使用するには、親で display:box を設定する必要があります。

1.ボックスフレックス:数値;

1) 親要素の幅の数

2) 子要素に固定幅が設定されている場合、その子要素は固定幅を使用し、固定幅が設定されていない他の子要素は残りの親の幅(親 - 固定幅を持つ子要素の合計幅)を使用します。

3) 子要素にマージン値がある場合、残りの幅(親の幅 - 子の固定合計幅 - 合計マージン値)は数値部分になります。

2.ボックスの向き:水平/垂直

親にこのプロパティを設定すると、子要素は水平または垂直に配置されます。

注: すべての主要ブラウザがこのプロパティをサポートしているわけではないため、プレフィックスを追加する必要があります。

1) 水平配置の場合、子要素の合計幅 = 親要素の幅。親の幅が固定されている場合、子に設定された幅は無効になり、子は親の幅を埋めます。

2) 垂直配置の場合、子要素の合計高さ = 親要素の高さ。親の高さが固定されている場合、子に設定された高さは無効になり、子は親の高さを埋めます。

3.ボックス方向:通常/逆

子要素の並べ替え順序を決定するには、親要素にこのプロパティを設定します。

1) 通常のデフォルト値、子はHTML順に並べられる

2) 逆

4.ボックス配置:開始/終了/中央/ストレッチ

親レベルでの子の垂直配置を設定します。

1) 垂直上揃えを開始する

2) 垂直下揃えを終了する

3) 中央垂直配置

4) ストレッチは、親によって設定された高さに合わせて子の高さを伸ばします。子の高さが無効です。

5.ボックスパック:開始/終了/中心

親レベルでの子の水平方向の配置を設定します。

1) 水平左揃えを開始

2) 水平右揃え終了

3) 中央揃え

要約する

上記は私が紹介した新しい CSS display:box 属性です。お役に立てれば幸いです。ご質問があれば、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  MySQL 文字セットの変更に関する実践的なチュートリアル

>>:  HTML フォームタグチュートリアル (2):

推薦する

Dockerはブリッジを追加し、IPアドレスの範囲を設定します

バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...

フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

今日、今週、今月、先月のMySQLクエリデータ

今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...

Expressはログイン認証を実装

この記事では、ログイン認証を実装するためのExpressの具体的なコードを例として紹介します。具体的...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

MySQL 5.7 クラスタ構成手順

目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...

MySQL の問題を解決する: MSVCR120.dll が見つからないため、コードの実行を続行できません

1. 問題MySQL の初期化時に発生する問題は、次のとおりです。 1. 「MSVCR120.dll...

HTML チュートリアル: DOCTYPE の省略形

HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...

初心者向けMySQLシリーズチュートリアル

目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...

Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明

Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...

Linux テキスト検索コマンド find の詳細な使用方法

find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...

MySQL ビューの紹介と基本操作のチュートリアル

序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...