柔軟ポーチモデル、方法、他のボックスとどのように利用可能なスペースを処理するために配電ボックスを決定 - CSS3は、新しいボックスモデルを導入しています。このモデルを使って、簡単にブラウザウィンドウの弾性レイアウト流体レイアウト適応または適応フォントサイズを作成することができます。柔軟なポーチモデルが良い、のGeckoとWebKitのモデルは、いくつかの暫定的なテストを持って見えます。プラス-mozや-webkitは、これらのプロパティの前にプロパティを使用します。これは、Firefox、Safariは、あなたがこれらの機能を使用することができクロム、です。、のような私たちはいくつかの一般的な問題のWebデザインを解決するためのモデルは非常に便利です：フォームのレイアウト、視覚的に別々のHTMLストリームは、垂直方向の中央、というように。便宜上、私は柔軟なポーチモデルの例を説明するためにここにWebKitの接頭辞を使用し、読者には、ブラウザのプレビュー物語をクロムすることができます。次のHTMLコードを使用して弾性ボックスモデルの例：
HTMLストリームカセットボックスに基づく伝統的なモデルは、垂直方向に配置されています。弾性ボックスモデルは、それを逆にしてもよい、特定の順序を指定することもできます。柔軟ポーチモデルを開くために、唯一のサブボックスは表示属性値ボックス（またはインラインボックス）のボックスセットができています。ここではボックスボックス、ボックスのオープンボックスモデルは次のようになります。
#box {表示：ボックス;} / *オープンボックスボックスボックスモデル* /
次のように弾性ベースボックスのCSSレイアウトのコードは次のとおりです。
ブラウザは、図1に示すように、このページ上のファイルを解釈した後、Chromeブラウザを使用してこのファイルを直接開いて、あなたは結果を見ることができます。
図弾性ボックスモデル
（1）ボックス配向ボックスモデルのレイアウトの方向の定義
表1に記載されているようにボックス配向パラメータ。
表1のボックス・オリエントパラメータ説明
垂直方向と水平方向：配布定義された軸の「ボックス・オリエント」。デフォルトレベルは、ボックスは、属性垂直、水平方向に設定されている場合に、水平に、垂直表示ボックスサブボックス、コードCSSボックスの一部として提供される以下の通りであります：
使用Chromeブラウザは、ファイルを再オープンし、図に示すように、あなたは、サブ垂直分布ボックスボックスモデルを見ることができます。
図弾性垂直分布ボックスモデル
（2）box-direction元素排列顺序
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。box-direction的参数说明如表2所示。
表2 box-direction参数说明
定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。若不设置该属性值或为为该属性设值为“normal”，则盒子以正序排列。接下来，我们将盒子设为水平分布并将其出现的顺序反转，box的CSS代码如下：
将上例的box的CSS代码替换后，使用chrome浏览器重新打开这个文件，就可以看到这个盒模型的顺序反转了，如图3所示：
图3 弹性盒模型反转
（3）box-ordinal-group设置元素的具体位置
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。将盒子的分布顺序按照特定的顺序排列如“3-2-1-5-4”，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到这个盒模型的顺序按照“3-2-1-5-4”排列，如图4所示：
图4 弹性盒模型排序
（4）box-flex定义盒子的弹性空间
默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。如果盒子是弹性的，其大小将按下面的方式计算：
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
下面的例子中，为每个盒子设定弹性空间。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到每个盒模子的弹性空间不同，如图5所示：
图5 盒模型弹性空间
除了为每个盒子设定弹性空间，我们还可以为部分盒子设定弹性空间，其它部分盒子有固定大小，例如我们将最中间的盒子也就是第三个盒子设定一个固定宽度为200px，其它盒子设定box-flex的属性值至少为1时，随着box盒子的宽度变化，除了第三个子盒子的宽度固定，其它盒子的宽度都会变化，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，如图6所示：
图6 盒模型弹性空间
我们试图改变box的宽度来查看子盒子的大小，因为这里设定的box宽度为100%，所以我们可以通过改变浏览器的大小来控制box的宽度，当我们缩小浏览器时，可以观察到第三个盒子的宽度固定，其它盒子的宽度变小，如图7所示：
图7 盒模型弹性空间
同样地，我们也可以将两边的盒子固定，中间的盒子固定大小，这里就需要读者自己去实践练习。
（5）box-pack对盒模型富裕空间进行管理
box-pack属性规定当框大于子元素的尺寸，在何处放置子元素。该属性规定水平框中的水平位置，以及垂直框中的垂直位置。box-pack的参数说明如表3所示。
表3 box-pack参数说明
下面通过一个案例来对盒模型的富裕空间进行管理，通过一起使用box-align和box-pack属性，当有富裕空间时，让所有子元素居中，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到盒子的子元素居中，如图8所示：
图8 盒模型富裕空间管理
特别地，我们来对“box-align”属性的“baseline”属性值来进行说明，“baseline”表示设置伸缩盒对象的子元素基线对齐，可能大多数读者不理解什么叫做基线对齐，我们通过下面的案例来对这个属性值进行图形化的理解，代码如下：
ボックスモデルは、本実施形態では5つのサブ要素が含まれ、そして「ボックスALIGN」プロパティボックスのベースライン「ベースライン」と整列されます。サブエレメントの第二線などの高200pxの、ライン4サブ要素高いセット100pxに、独自の高さ130pxのためのサブ要素の残りの部分を設定します。ファイルを実行し、結果を図9に示す得られました：
図9ボックスモデル基線アライメントサブ要素
この例が示すことにより、ボックス本体サブ要素モデルの内容に応じて、それを合わせ、整列基準の重要性を理解することは困難ではありません。
垂直方向の要素の位置を管理する（6）ボックスALIGN
ボックスALIGN属性の指定は、どのようにサブ要素、パラメータは以下の表4に記載の箱ALIGNのフレームを整列させます。
表4ボックスアラインパラメータ説明
カートリッジケースによって垂直方向のスペースのFEモデルを管理するために、次の。すべての子要素のための垂直方向豊かな空間を中心とした場合、以下のように、htmlコードは次のようになります。
ファイルを再オープンクロムのブラウザを使用して、あなたは、図10に示す中心にボックスサブ要素モデルを、見ることができます：
図のボックスモデル豊かな10の縦のスペース管理
フォームのレイアウト、上下中央に視覚的に別々のHTMLストリームなど：フロントエンドの開発者として、私たちのモデルは、次のような、非常に簡単にいくつかの一般的なWebデザインの問題を解決します。