css3で-webkit-boxの使用法を表示します
Display Webkit Box Usage Css3
webkit-box
1.水平Webレイアウトを実装する前は、通常、フロートまたはディスプレイ：インラインブロックですが、実際の流動的なレイアウトを実現することはできません。少なくとも幅は自分で計算する必要があります。
2.flexibleboxは、流動的なレイアウトの本当の感覚を実現できます。対応するプロパティが指定されている限り、ブラウザは追加の計算を行います。
3.box-flexは、css3の新しく追加されたボックスモデルプロパティであり、その外観は、N個のマルチ構造とcssによって実現されるレイアウト方法を解決できます。古典的なレイアウトアプリケーションは、レイアウトの垂直輪郭、水の平均、および比例分割です。
現在、box-flexプロパティは、firefox、Opera、およびchromeブラウザーで完全にはサポートされていませんが、それらのプライベートプロパティを使用して、firefox（-moz）、opera（-0）、chrome / safari（-webkit）を定義できます。
ボックスモデルについて提供されるいくつかのプロパティ
ボックス指向 | 子要素の配置垂直（垂直行）または水平（水平行） |
ボックスフレックス | 兄弟要素間の比率、1つの係数のみ |
ボックスアライン | ボックス配置 |
ボックス方向 | ボックスの方向 |
ボックスフレックスグループ | グループ内の流体係数 |
ボックスライン | |
ボックス-オーディナル-グループ | グループ内の子要素の配置 |
-moz-box-pack：end
-webkit-box-pack：end
レンダリング 
以下のボックスパックは、flexibleboxのいくつかの例です。
1.1。 4列のアダプティブレイアウト。
レンダリング
1.1html
css3でのwebkit-boxの使用 .wrap { 表示：-moz-box display：box 表示：-webkit-box -webkit-box-orient：horizontal / *水平表示* / } 。子 { 最小-高さ：200px ボーダー：2pxソリッドオレンジレッド -webkit-box-flex：1/ * 1対1 * / マージン：20px フォントサイズ：100px フォントの太さ：太字 フォントファミリー：Georgia -webkit-box-align：center / *中央に表示* / } 1 二 3 4 |
1.2。列が固定幅に設定されている場合、残りの2つの列に異なる比率を割り当てることができます（3列のレイアウト）。
レンダリング
HTMLコード
css3でのwebkit-boxの使用 .wrap { 表示：-webkit-box -webkit-box-orient：horizontal / * horizontal * / } 。子 { 最小-高さ：200px ボーダー：2px無地オレンジ -webkit-box-flex：1 マージン：10px フォントサイズ：50px フォントの太さ：太字 フォントファミリー：Georgia -webkit-box-align：center } .w100 {幅：100px} .flex1 {-webkit-box-flex：1} .flex2 {-webkit-box-flex：2} 100px 1 比率2 |
1.1。以下は、一般的なWebページの基本的なレイアウトです。
レンダリング
css3でのwebkit-boxの使用 ヘッダー、フッター、セクション{ ボーダー：5pxソリッド＃FFA500 フォントファミリー：Georgia フォントサイズ：40px text-align：center マージン：20px } #doc { 幅：80％ 最小幅：600px 高さ：100％ 表示：-webkit-box -webkit-box-orient：vertical マージン：0自動 } ヘッダ、 フッター{ 最小-高さ：100px -webkit-box-flex：1 } #content { 最小-高さ：400px 表示：-webkit-box -webkit-box-orient：horizontal } .w200 {幅：200px} .flex1 {-webkit-box-flex：1} .flex2 {-webkit-box-flex：2} .flex3 {-webkit-box-flex：3} ヘッダ 幅200 比例3 比率1 フッター |