第 29 章 CSS3 フレキシブル スケーリング レイアウト [パート 2]_html/css_WEB-ITnose

学習ポイント:

1. 新しいバージョン

講師: Li Yanhui

この章では主に、将来のレスポンシブなエラスティック スケーリング レイアウトを実現するために HTML5 の CSS3 によって提供されるソリューションについて説明します。予備学習。

1.新しいバージョン

Flexbox モデルの新しいバージョンは、2012 年 9 月に提案された作業中のドラフトです。このドラフトは、W3C によって導入された最新の構文です。このバージョンは、標準を指定し、新しいブラウザに完全な互換性を持たせ、将来のブラウザ更新での統一を達成することを目的としています。

まず、次の 2 つの属性値で格納式ボックスの表示を設定します:

属性値	説明
flex	ブロックとしてのコンテナボックスモデルレベルのフレキシブル ボックス表示 (新バージョン)
inline-flex	コンテナ ボックス モデルをインライン レベルのエラスティック ボックスとして表示します (新バージョン)

//ほとんどはプレフィックスを必要としません

❤️

OperaSafari この表から分かるように、 Webkit エンジン ブラウザー Chrome および Safari のバージョンでは、Chrome ブラウジング中に -webkit- を追加する必要がありますが、バージョン 29 以降は省略できます。 //設定は上から下に配置されています 説明

		接頭辞付き なし	なし	21~28 なし	7.0
プレフィックスなし	11+	20 +	29+	12.1	なし
1.flex-direction	flex-direction 属性は、flex 項目の配置を設定する古いバージョンの box-orient 属性と同じです。	div { display: flex;}		属性値

行

設定は左から順に並んでいますright

row-reverse上から下に配置するように設定します下から設定 上に配置 flex-wrap属性は旧バージョンのbox-linesに似ていますが、対応しているブラウザがないためbox-linesについては説明しませんでした。それ。 //設定に対応できない場合は自動的にラップします 属性値説明

右から左に配置するように設定します	column
	列反転
	2.flex-wrap
div { flex-direction: column;}

nowrap

デフォルト値、すべて 1 行に表示または列

wrapスケーラブルなアイテムを収容できない場合、巻き方向が逆です

スケーラブルなアイテムを収容できない場合に自動的にラップする

wrap-reverse

3.flex-flow

flex-flow 属性是集合了排列方向和控制换行的简写形式。

//简写形式

div {    flex-flow: row wrap;}

4.justify-content

justify-content 属性和旧版本中的 box-pack 一样，设置伸缩项目的对其方式。

//按照中心点对齐 

div {    justify-content: space-around;}

属性值	说明
flex-start	伸缩项目以起始点靠齐
flex-end	伸缩项目以结束点靠齐
center	伸缩项目以中心点靠齐
space-between	伸缩项目平局分布
space-around	同上，但两端保留一半的空间

5.align-items

align-items 属性和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。

//处理额外空间 

div {    align-itmes: center;}

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

6.align-self

align-self 和 align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和 align-itmes 一致。

//单独设置清理额外空间

p:nth-child(2) {    align-self: center;}

7.flex

flex 属性和旧版本中的 box-flex 类似，用来控制伸缩容器的比例分配。

//设置比例分配 

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

8.order

order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

//设置伸缩项目顺序

p:nth-child(1) {    order: 2;}p:nth-child(2) {    order: 3;}p:nth-child(3) {    order: 1;}