CSS3 フレキシブル ボックス モデルの概要

不言
リリース: 2018-06-26 13:43:52
オリジナル
1490 人が閲覧しました

この記事では主に CSS3 フレキシブル ボックス モデルの紹介を紹介します。これには特定の参考値があります。必要な友達はそれを参照してください。

CSS3 は新しいボックス モデルを導入します。フレキシブル ボックス モデルはボックスを決定します。他のボックスにどのように分散するか、および使用可能なスペースをどのように扱うかについて、このモデルを使用すると、ブラウザー ウィンドウに適応する流動的なレイアウトや、フォント サイズに適応する柔軟なレイアウトを簡単に作成できます。ボックス モデル — フレックスボックス モデル。ボックスが他のボックスにどのように分配されるか、および利用可能なスペースをどうするかを決定します。これは XUL (Firefox で使用されるユーザー対話言語) に似ており、XAML や GladeXML などの他の言語も同じボックス モデルを使用します。このモデルを使用すると、ブラウザ ウィンドウに適応する流動的なレイアウトや、フォント サイズに適応する柔軟なレイアウトを簡単に作成できます。この記事の例では、次の HTML コードを使用します:

<body> 
<p id="box1">1</p> 
<p id="box2">2</p> 
<p id="box3">3</p> 
</body>
ログイン後にコピー

従来のボックス モデルは、HTML フローに基づいてボックスを垂直方向に配置します。フレックスボックス モデルを使用すると、特定の順序を指定したり、その順序を逆にしたりできます。フレキシブル ボックス モデルを有効にするには、子ボックスを持つボックスの表示属性値を box (または inline-box) に設定するだけです。

display: box;


水平または垂直分布
「box-orient」は、分布の座標軸 (垂直方向と水平方向) を定義します。これら 2 つの値はボックスの表示方法を定義します。

body{ 
display: box; 
box-orient: horizontal; 
}
ログイン後にコピー

逆分布
"box-direction" はボックスが表示される順序を設定できます。デフォルトでは、配布軸を定義するだけで済みます。ボックスは HTML フローとともに配布されます。横軸の場合は左から右に分布し、縦軸の場合は上から下に分布します。ボックスの順序を逆にするには、「box-direction」の属性値を「reverse」として定義します。

body { 
display: box; 
box-orient: vertical; 
box-direction: reverse; 
}
ログイン後にコピー

特定の配布
属性「box-ordinal-group」はボックスの配布順序を定義します。配信順序は任意に制御できます。グループは「1」から始まる番号で定義され、ボックス モデルはこれらのグループを最初に配布し、これらすべてのボックスが各グループに含まれます。配布は小規模から大規模に配置されます。

body { 
display: box; 
box-orient: vertical; 
box-direction : reverse; 
} 
#box1 {box-flex:1;box-ordinal-group: 2;}
#box2 {box-flex:2;box-ordinal-group: 2;} 
#box3 {box-flex:2;box-ordinal-group: 1;}
ログイン後にコピー

ボックス サイズ

デフォルトでは、ボックスは伸縮性がありません。box-flex 属性値が 1 以上の場合、ボックスは伸縮性になります。 box-flex が親コンテナの幅を分割する方法。3 つのサブブロックはそれぞれ 1、2、2 に設定されます。つまり、親コンテナは 5 つの部分に分割され、1/5 (100px) を占めます。それぞれ親構造の幅の 2/5(200px)、2/5(200px)。ボックスが伸縮性がない場合は、中身がはみ出さずに見えるようにできる限り幅が広くなり、そのサイズは「幅」と「高さ」(または最小高さ、最小幅、最大幅)によって決まります。 、最大高さ)。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS 使用ボックス モデルの例


以上がCSS3 フレキシブル ボックス モデルの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!