CSSボックスモデル CSS3スケーラブルボックス属性(フレキシブルボックス)_html/css_WEB-ITnose

CSSボックスモデル(パート2)

1. CSS3 フレキシブル ボックス (Flexible Box)

フレキシブル ボックス属性 (Flexible Box) は、CSS3 で新しく追加されたボックス モデル属性であり、その外観は、垂直方向などを実現するためによく使用されるフローティング レイアウトを壊すものです。高さ、水平分割、按分などの方法と空きスペースの扱い方。このモデルを使用すると、ブラウザ ウィンドウに適応する流動的なレイアウトや、フォント サイズに適応する柔軟なレイアウトを簡単に作成できます。ただし、Firefox および Chrome ブラウザでは、プライベート属性 (Firefox (-moz)、Chrome (-webkit)) を使用して定義する必要があります。

CSS3 スケーラブル ボックス プロパティ リスト:

Property	Description	Description
box-orient	の子要素がボックスは水平または垂直に配置する必要があります。	水平または垂直分布
box-direction	ボックスの子要素の表示方向を指定します。	逆分布
box-ordinal-group	ボックスの子要素の表示順序を指定します。	特定の分布
box-flex	ボックスの子要素がスケーラブルかどうかを指定します。	box-size
box-flex-group	スケーラブルな要素をフレックス グループに割り当てます。	ボックス サイズ
box-pack	水平ボックスの場合は水平位置、垂直ボックスの場合は垂直位置を指定します。	より多くのスペースを処理します
box-align	ボックスの子要素を配置する方法を指定します。	さらなるスペースの処理
box-lines	親要素ボックスのスペースを超えた場合に表示を折り返すかどうかを指定します。	処理スペースが不十分です

不十分な処理スペース

以下は、CSS の新しいフレキシブル ボックス モデル属性の詳細な紹介です。 3.

'' s's's 's' s 's' s '' '' 'to' to so so so so so so so so so so so so so so so so so so so so so so so so soはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはい

ステートメント:

?CSS3 の柔軟なレイアウトを使用するには、次の設定を行う必要がありますdisplay:box または display:inline-box の親コンテナー。

? 例のこの部分は、Chrome で実行しているスクリーンショットです。

1. ボックス サイズ設定: 特定の方法で特定の領域に一致する特定の要素を定義します。

構文:

box-sizing: content-box|border-box|inherit;

content-box (デフォルト)

これは CSS2 で指定された幅と高さの動作です。 1.幅と高さは要素のコンテンツ ボックスに個別に適用されます。要素のパディングと境界線を幅と高さの外側に描画します。

つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。 box-sizing 属性の値は、親要素から継承される必要があります。 文法:

border-box	要素に設定された幅と高さによって、要素の境界ボックスが決まります。
	inherit
	2. box-orient: ボックスの子要素を水平に配置するか垂直に配置するかを指定します。
box-orient: 水平|垂直|インライン軸|ブロック軸|継承;	値:

Value

説明

水平方向

子要素を左から右へ水平方向の行に配置します。

vertical

子要素を上から下に垂直に配置します。

inline-axis (デフォルト)

インライン軸に沿って子要素を配置します (水平方向にマップされます)。

block-axis

子要素をブロック軸に沿って配置します (垂直にマップされます)。

inherit

box-orient 属性の値は、親要素から継承される必要があります。

说明：

      horizontal和inline-axis属性其效果表现一致，都可以将容器水平排列，在默认情况下也呈现水平排列的样式。当父容器设置高度时，在firefox下面其子容器的高度无效，但chrome下面则有效。

      如果你容器不设置高度，子容器的高度值才生效，在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度，未设置的其高度和最大值的高度一样，其实就是和父容器的高度一致。

      vertical和block-axis属性效果表现一致，都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度，也是谷歌下面有效，火狐无效，其它都与horizontal表现一致。

      切记，inline-axis为默认值，沿着行内轴来排列子元素（映射为 horizontal）。

示例代码3：设置框的子元素在水平行中从左向右排列子元素 （修改样式表文件，添加如下样式代码）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient: horizontal;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient: horizontal;    /*W3C*/    display:box;    box-orient: horizontal; }

效果如下：

注:

实现垂直方向上布局、inline-axis 和 block-axis，只需修改值即可。

inherit 属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局。

3. box-direction：规定框的子元素的显示方向。

语法：

box-direction: normal|reverse|inherit;

取值：

值	描述
normal（默认值）	以默认方向显示子元素。
reverse	以反方向显示子元素。
inherit	应该从子元素继承 box-direction 属性的值

说明：以反方向显示子元素。

示例代码4：设置垂直且以反方向显示子元素（修改样式表文件，添加如下样式代码）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    -moz-box-direction:reverse;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    -webkit-box-direction:reverse;    /*W3C*/    display:box;    box-orient:vertical;    box-direction:reverse;}

效果如下：

注:

normal只需修改值即可。inherit可自己实验。

4. box-ordinal-group：规定框的子元素的显示次序。

语法：

box-ordinal-group: integer;

取值：

值	描述
integer（默认值1）	一个整数，指示子元素的显示次序。

说明：根据box-ordinal-group的integer值从小到大显示。

示例代码5：设置子元素的显示次序（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    /*W3C*/    display:box;    box-orient:vertical;}#div1{/*给div1添加样式*/    width: 100px;    height: 50px;    background-color: #00B366;    box-ordinal-group:2;    -webkit-box-ordinal-group:2;    -moz-box-ordinal-group:2;}#div2{/*给div2添加样式*/    width: 100px;    height: 50px;    background-color: #80C8FE;    box-ordinal-group:1;    -webkit-box-ordinal-group:1;    -moz-box-ordinal-group:1;}#div3{/*给div3添加样式*/    width: 100px;    height: 50px;    background-color: #FEB380;    box-ordinal-group:3;    -webkit-box-ordinal-group:3;    -moz-box-ordinal-group:3;}

效果如下：

5. box-flex：规定框的子元素是否可伸缩。

语法：

box-flex: value;

取值：

值	描述
value（默认值0.0）	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

说明：

可伸缩，顾名思义，子元素如果规定可伸缩，则不要设置宽或高。但一些盒子可以有固定大小，不伸缩。

示例代码6：设置div3为固定大小，div1和div2为可伸缩且div1是div2的两倍（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    /*W3C*/    display:box;    box-orient:vertical;}#div1{/*给div1添加样式*/    box-flex:2.0;    -webkit-box-flex:2.0;    -moz-box-flex:2.0;    background-color: #00B366;}#div2{/*给div2添加样式*/    box-flex:1.0;    -webkit-box-flex:1.0;    -moz-box-flex:1.0;    background-color: #80C8FE;}#div3{/*给div3添加样式*/    height: 100px;     background-color: #FEB380;}

效果如下：

6. box-flex-group：将可伸缩元素分配到柔性分组。

语法：

box-flex-group: integer;;

取值：

值	描述
integer（默认值1）	一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。

说明：

动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）。具体怎么分，本人还不清楚。

示例代码7：将可伸缩元素分配到柔性分组（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    /*W3C*/    display:box;    box-orient:vertical;}#div1{/*给div1添加样式*/    background-color: #00B366;    box-flex:2.0;    -webkit-box-flex:2.0;    -moz-box-flex:2.0;    box-flex-group:1;    -webkit-box-flex-group:1;    -moz-box-flex-group:1;}#div2{/*给div2添加样式*/    background-color: #80C8FE;    box-flex:1.0;    -webkit-box-flex:1.0;    -moz-box-flex:1.0;    box-flex-group:2;    -webkit-box-flex-group:2;    -moz-box-flex-group:2;}#div3{/*给div3添加样式*/    background-color: #FEB380;    box-flex:1.0;    -webkit-box-flex:1.0;    -moz-box-flex:1.0;     box-flex-group:1;    -webkit-box-flex-group:1;    -moz-box-flex-group:1;}

效果如下：

7. box-pack：规定水平框中的水平位置或者垂直框中的垂直位置。

语法：

box-pack: start|end|center|justify;

取值：

值	描述
start（默认值）	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）。 对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。 对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center	均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后。
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

说明：

空间太多如何处理，可利用空间的分布取决于两个属性值：box-align 和 box-pack。

属性“box-pack”一般管理水平方向上的空间分布（根据box-orient的值，也可管理垂直方向），有以下四个可能属性：start、end、 justify、 or center。如，start 所有盒子在父盒子的左侧，余下的空间在右侧。

属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。如：start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部。

示例代码8：设置所有盒子在父盒子的右侧（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 400px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:horizontal;    -moz-box-pack:end;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:horizontal;    -webkit-box-pack:end;    /*W3C*/    display:box;    box-orient:horizontal;    box-pack:end;}#div1{/*给div1添加样式*/    width: 100px;    height: 50px;    background-color: #00B366;}#div2{/*给div2添加样式*/    width: 100px;    height: 50px;    background-color: #80C8FE;}#div3{/*给div3添加样式*/    width: 100px;    height: 50px;    background-color: #FEB380;}

效果如下：

设置所有盒子在父盒子的中间（center），如下图左；设置垂直（box-orient）且盒子在父盒子的左侧（start），如下图右

8. box-align：规定如何对齐框的子元素。

语法：

box-align: start|end|center|baseline|stretch;

取值：

值	描述
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。 对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。 对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch（默认值）	拉伸子元素以填充包含块。

说明：控制垂直方向（box-pack的相对方向）。

示例代码9：设置所有盒子在父盒子的右侧（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 400px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    -moz-box-pack:justify;    -moz-box-align:center;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    -webkit-box-pack:justify;    -webkit-box-align:center;    /*W3C*/    display:box;    box-orient:vertical;    box-pack:justify;    box-align:center;}

效果如下：

9. box-lines：规定当超出父元素框的空间时，是否换行显示。

语法：

      box-lines: single|multiple;

取值：

值	描述
single（默认值）	所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
multiple	允许框扩展为多行，以容纳其所有子元素。

説明:

スペースが不十分な場合はどうすればよいですか? 従来のボックス モデルと同様に、オーバーフロー属性を使用して表示モードを決定します。オーバーフローを避けるために、ボックスラインを複数に設定して、新しい行に表示することができます。検証する必要があります。

2つ。 DIV+CSS パターンの紹介

Web 標準は主に、構造、プレゼンテーション、動作の 3 つの部分で構成されます。

?構造基準に対応する主な言語は XHTML

?性能基準に対応する主な言語は CSS

?動作基準に対応する主な言語は JavaScript

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​? 標準的なページを作成する技術は XHTML+CSS です。ページ全体のレイアウト構造には DIV を使用することが多く (以前はテーブル レイアウトを使用していました)、コンテンツの外観を変更するために CSS を使用して、DIV+CSS モードを形成します。

DIV は実際にはボックス モデルのインスタンスであるため、ボックス モデルを深く理解することは Web ページのレイアウトにとって非常に重要です。

: