CSS3 の新機能に関する簡単な説明: 複数列レイアウト モジュール

CSS3 には、主にテキストの複数列レイアウトに使用される新しい複数列レイアウト モジュール (Multi-column Layout Module) が追加されました。

複数列は次のように分割できます:

① 列数と列幅: 列数、列幅、列

列数: 値は正です複数列分類の列数を示す整数 (単位なし)。デフォルトは auto (列数は列幅およびその他のパラメーターに従って決定されます)。 IE はこの属性をサポートしていません。Firefox および Webkit では、プレフィックス -moz および -webkit を追加する必要があります。

column-width: マルチカラムの列幅を示します。単位は px または em ですが、負の数にすることはできません (列数は、column などの他のパラメータに従って決定されます)。 -count ですが、現時点では、column-count は使用されません)。 IE はこの属性をサポートしていませんが、Opera11 以降では、接頭辞 -moz および -webkit を追加する必要があります。

columns: 列幅と列数の 2 つのプロパティを組み合わせます。この省略モードは、Webkit と Opera でのみサポートされており、Firefox ではサポートされていません。

column-widthとcolumn-gapが同時に設定されている場合、実際の列幅はcolumn-gapに従って調整され、設定されたcolumn-width値と等しくない場合があります。

設定された列幅が要素コンテナの幅より大きい場合、要素コンテンツは列幅に従ってレイアウトされず、コンテナがバーストされ、列幅がコンテナと同じになるように縮小されるだけです。幅。

列をさまざまな画面サイズに適応させるには、正確な列幅または列数を設定し、それに応じて幅、列ギャップ、列ルール幅、列ルール幅などの関連属性を指定することが最善です。要素の列の場合は、-gap と column-rule-width のデフォルト値を使用します。複数列のデザインでは、column-width と columns-count の値を明確に記述するのが最善です。

② 列間隔と列スタイル：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule

span In columnレイアウトでは、column-gap は margin に似た 2 つの列の間のスペースに相当し、column-rule は border に似た分割線に相当します。 column-gap と olumn-rule には高さがあり、その高さは列の高さと同じです。最大の違いは、column-gap にはスタイルがなく、列の間に特定のスペースを占有するのに対し、column-rule にはスタイルがあることです。ボーダーと同様に、スタイルがあります。

列ギャップの単位は px または em ですが、負の数は指定できません。デフォルト値は通常 (1em) です。 IE はこの属性をサポートしていませんが、Opera11 以降では、接頭辞 -moz と -webkit を追加する必要があります。

column-gap を使用して隣接する列間の距離を変更することはできますが、複数の列要素に同時に column-width が設定されている場合、column-gap と column-width の合計が合計よりも大きい場合は、複数の列要素の幅。これにより、列が分割され、最初の列として表示されます。このとき、列幅は要素の合計幅に自動的に調整されます。

column-rule にも、border と同様のプロパティがあります。幅、column-rule-width (デフォルト値は中)、スタイル、column-rule-style (デフォルト値はなし)、color、column-rule-color、違いは次のとおりです。 Border は特定の空間位置を占めますが、column-rule は空間位置を占めません。column-rule-width を増やしても列のレイアウトには影響しませんが、要素の端まで要素の両側に拡張されるだけです。 。

③ カラムブレーカー:break-before、break-after、break-inside

現在サポートされているブラウザは非常に少ないため、まだ紹介しません。

④ 列を埋める：column-fill

現在サポートされているブラウザは非常に少ないため、まだ導入されません。

⑤ 列をまたがる: column-span

column-span は主に、column 要素内のサブ要素が何列にまたがることができるかを定義するために使用されます。特定のコンテンツやタイトルをどの列にも分割せず、すべての列にまたがる必要がある場合は、column-span 属性が必要です。デフォルト値は none です。これはどの列にもまたがらないことを意味し、all はすべての列にまたがることを意味します。現在サポートされているブラウザは、Safari、Chrome、Opera11 以降のみです。Webkit では、接頭辞 -webkit が必要です。

.multiColumns {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.multiColumns h1 {
	background: red;
	-webkit-column-span: all;
	column-span: all;
}

関連する推奨事項:

レイアウト計画 - 複数列レイアウト

HTML-cssの複数列レイアウト

複数列レイアウトについて

以上がCSS3 の新機能に関する簡単な説明: 複数列レイアウト モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。