第 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;} ログイン後にコピー