第29章 CSS3エラスティックレイアウト【前編】_html/css_WEB-ITnose

学習ポイント:

1. レイアウトの概要

2. 古いバージョン

講師: Li Yanhui

この章は主にHTML5 の CSS3 について説明します 将来の応答性の弾力性のために提供されています ここにありますテレスコピック レイアウト ソリューションについての予備的な理解。

1.レイアウトの紹介

CSS3 は、全く新しいレイアウト方法である Flexbox レイアウト、つまり柔軟でスケーラブルなレイアウト モデル (Flexible Box) を提供します。レスポンシブ レイアウトを実装するためのより効率的な方法を提供するために使用されます。ただし、このレイアウト方法はまだ W3C のドラフト段階にあり、旧バージョン、新バージョン、および混合遷移バージョンの 3 つの異なるコーディング方法に分かれています。開発中にさまざまな変更が行われる可能性があり、ブラウザの互換性の問題もまだあります。したがって、このレッスンは予備的な理解として使用できます。

まず、古いバージョンのブラウザの互換性を見てみましょう:

Flexbox 古いバージョンの互換性

上記のデータは、CSS3 マニュアルから抜粋しました。もちろん、教科書や記事が異なれば多少の違いはあります。ただし、エラー率は 1 つまたは 2 つのバージョンにすぎないため、影響は大きくありません。 //HTML部分 //CSS部分 まず、レイアウト モジュールを必要とするいくつかの親要素のコンテナ属性表示を設定する必要があります。

Properties	IE	Firefox	Google Chrome 4 ~ 25	4 ~ 31 15 ~ 18	5.17+
プレフィックスなし	なし	なし	なし	None	None
まず、ステップ 1: コンテンツを作成し、それを 3 つの領域に分割します。	<div> <p> 第一段内容... </p> <p> 第二段内容... </p> <p> 第三段内容... </p></div>	p { width: 150px; border: 1px solid gray; margin: 5px; padding: 5px;}div { display: -moz-box; display: -webkit-box; display: box;}	以上の設定により、IEブラウザを除いてレイアウトは水平分散を実現します。したがって、以下では、これらの属性の意味を中心に学習していきます。	Ⅱ。旧バージョン	属性と属性値が display:box の場合、それは 2009 年 7 月に設定された作業草案であり、旧バージョンに属します。これは、一部の初期のブラウザの柔軟なレイアウト スキームを目的としています。

プロパティ値

説明

box

コンテナボックスモデルをブロックレベルのフレックスボックスとして表示します (古いバージョン) )

インライン- box

div {    display: -moz-box;}

//垂直方向の流れを設定します

div {    -webkit-box-orient: vertical;}

コンテナ ボックス モデルをインライン レベルのエラスティック ボックスとして表示します (古いバージョン)	inline 要素と同様に、ブロック レベルが行全体を占めることがわかります。 要素と同様に、レベルは行全体を占めません。しかし、私たちはボックス全体を、誰も占有しないように設定し、一貫性を保ちました。 //弾力性を設定します。Firefox を例にします
1.box-orient property	box-orient は主にボックス内の要素の流れの方向を実現します。
	属性値

説明

horizo​​ntal

伸縮アイテムは左から右に横に並べられています

vertical Flex アイテムはインライン軸に沿って配置されます伸縮アイテムはブロック軸に沿って表示されます box-direction プロパティは主にフレックス コンテナ内のフロー順序を設定するために使用されます。 //逆順に設定

div {    -moz-box-direction: reverse;} 

属性値

Flex アイテムは上から下に垂直に配置されます	inline-axis
	ブロック軸
	2.box-direction
	説明

通常

デフォルト値、通常の順序

逆順

逆順

3.box-pack

box-pack 属性用于伸缩项目的分布方式。

//分布方式已结束位置靠齐

div {    -moz-box-pack: end;} 

属性值	说明
start	伸缩项目以起始点靠齐
end	伸缩项目以结束点靠齐
center	伸缩项目以中心点靠齐
justify	伸缩项目平局分布，-webkit-支持，-moz-不支持

4.box-align

box-align 属性用来处理伸缩容器的额外空间。//居中对齐，清理上下额外空间

div {    -moz-box-align: center;}

属性值	说明
start	伸缩项目以顶部为基准，清理下部额外空间
end	伸缩项目以底部为基准，清理上部额外空间
center	伸缩项目以中部为基准，平均清理上下部额外空间
baseline	伸缩项目以基线为基准，清理额外的空间
stretch	伸缩项目填充整个容器，默认

5.box-flex

box-flex 属性可以使用浮点数分配伸缩项目的比例//设置每个伸缩项目占用的比例

p:nth-child(1) {    -moz-box-flex: 1;}p:nth-child(2) {    -moz-box-flex: 2.5;}p:nth-child(3) {    -moz-box-flex: 1;}

6.box-ordinal-group

box-ordinal-group 属性可以设置伸缩项目的显示位置。

//将第一个位置的元素，跳转到第三个位置

p:nth-child(1) {    -moz-box-ordinal-group: 3;}