【翻訳】方法及び使用するためのマルチカラムCSSレイアウト

オリジナル： そして、どのように使うCSSマルチカラムレイアウトに
著者：レイチェルアンドリューの
翻訳：ボーヒン

私たちが上の注意を置くときはCSS Grid、レイアウトやCSS Flexboxレイアウト、彼らはしばしば、別のレイアウト方法を無視します。この記事では、私がご紹介しますマルチカラムのレイアウトを -と一般に呼ばれるmulticolか、「列のCSS」。この記事を通して、あなたが使用することを学んだcolumnsベストプラクティスだけでなく、いくつかの使用columns上の注意を。

MULTICOLは何ですか？

multicol基本的な考え方は、あなたが新聞のように、複数の列に、コンテンツの大部分を置くことができるということです。あなたはこれを実現するために2つのプロパティのいずれかを使用することができます。あなたは使用することができcloumn-count、列のコンテンツの数を指定するプロパティを。また、使用することができますcolumn-widthブラウザは列の適切な数を決定するので、目的の列幅を指定するプロパティを。

あなたはマルチカラムレイアウトに変換する際に関係なく、あなたのコンテンツが要素を含んでいるものを、すべてがコンテンツストリームから動作しませんが、列は、フォームが表示されます。これは作るmulticolのブラウザでレイアウトし、現在一般的には他のレイアウトが異なることになります。例えば、FlexboxそしてGridこれらのサブ要素が関与するように、コンテナ要素の子要素を取得flexし、grid過去にレイアウト。使用するとmulticol、各列の中に、あなたはまた、通常のコンテンツストリームを取得します。

次の例では、使用しているcolumn-width、最小列幅を14em。Multicol幅と同じくらい割り当てます14em、その後、各列共有して残りのスペースを聞かせて、コラムのを。各列の幅は、少なくとも14emコンテナの幅よりも小さくなっている場合を除き、14emそれは一つだけを表示します。multicolまた、CSS初めての行為で、あなただけでなく、デフォルトの応答タイプのルールに沿って列を作成することができます。あなたは（CSSのクエリを増加させないMedia Queries処理のために、ブラウザ自体ように、各ブレークポイントの列の数を変更しますが、最適な幅を開発するために、）。

例リンク

[プレビュー]をクリックします

// 核心代码摘录
.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
}复制代码

列のスタイル

あなたは列のプロパティを使用する場合（columnsとき）のレイアウトを作成するためにcloumns boxコンテンツを配置することができませんでした。あなたは使用することはできませんJavaScriptあなたは、このようなように、背景色、マージン、パディング、およびとして、単一の列のためのユニークなスタイルを指定することはできません、見つけること。すべてがcolumn boxes同じサイズのままになります。あなたがすることができる唯一のものは使用することがあるcolumn-rule財産の役割に似た列の間にルールを追加するには、プロパティをborder。また、使用することができcolumn-gap、列の間のギャップを制御するためのプロパティをプロパティのデフォルト値1emが、あなたはまた、任意の有効な長さの単位に変更することができます。

例リンク

[プレビュー]をクリックします

// 核心代码
.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}复制代码

これは、multicol基本的な機能。あなたは、大規模なコンテンツ列を分割することができます。コンテンツは方向を含むと、これらの列を作成して、各列を埋めるためになります。あなたは使用し、列とルールの間のギャップを制御することができborder、同じ値をすることができます。これまでのところ、お使いのブラウザで上記のすべての良いサポートを得るために、そして長い時間を回避されているが、仕様の後方互換性を作ることは非常に安全です。

あなたは、Web上でのカラムを使用する場合に、注意すべきいくつかの他のものに列を使用するだけでなく、いくつかの潜在的な問題を検討する必要があります。

ハードル

時には、あなたは、コンテンツの一部も表示され、これらの列にわたって要素の使用を打破することができます。columns-spanプロパティがために使用されるmulticolこれを達成すること。

次の例では、私が使用して<blockquote>列にまたがるする要素を。この操作を行う場合、コンテンツはそれぞれ、に配置され、2つの領域に分割されることに注意してくださいcolumn-span要素の上下。コンテンツはセットスキップしないであろうcolumn-span要素のを。

column-span プロパティは、Firefox、との後方互換性に実装されています。

例リンク

// 核心代码
blockquote {
  font: 2em 'Berkshire Swash', cursive;
  margin: 0;
  column-span: all;
  text-align: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}复制代码

あなたは、現在の規範を知って、column-span値のみall、またはnone。あなたは新聞のスタイルで実現したい場合は、達成するために他のマルチカラムレイアウトレイアウトと組み合わせて使用することができます。次の例では、2本の列グリッドレール（グリッド）を有する容器を得ます。トラックの幅が左側にあり2fr、トラックの右側の幅があります1fr。我々は2つの列にトラックを残したmulticolコンテナ。また、ハードルの要素が含まれています。

右側には、我々は、第二の内容を置くGridトラックの列が。レイアウト方法の多様を試みることによって、我々は正確に手元の作業のためのレイアウト方法に合わせて把握することができます-ミックスと一致することを恐れてはいけません！

例リンク

// 核心代码
.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}

.container article {
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

.container aside {
  border-left: 1px solid #ccc;
  padding: 0 1em;
}复制代码

カットオフ制御

あなたのコンテンツがタイトルに含まれている場合は、列の最後に表示され、コンテンツが次の列に登場しているタイトルを避けたいと思うかもしれません。別の例として、いくつかのテキストの絵を使用してコンテンツが、その後、理想的には、写真と彼の文章は、列にまたがって分割されることなく、全体のショーのままになります。

あなたは列の内容を分割すると、この動作は次のように知られているCSSの断片モジュール（断片化）。コンテンツは、単にプリンタの印刷モードと同様に、同一の2つの列を選択し、ディスプレイ上の2つに分割されています。したがって、ウェブのレイアウト上の他の方法は、と比較してmulticol最も近いPaged Mediaレイアウト方法。したがって、我々はCSS2.1に属するプロパティを使用することができpage-break、これを達成するために。

• page-break-before
• page-break-after
• page-break-inside

最近では、CSSの断片モジュールの仕様は、属性の断片化モジュールは、様々な設計仕様には、どのようにコンテキストフラグメント定義Paged Media、multicolおよび停止時領域スタイル（地域スタイリングを）;連続表示領域をサポートします分解される（断片化）コンテンツ。これらの共通の属性を使用して、それらが将来に適用することができるCSS断片モジュールとして、コンテキストFlexboxプロパティが整列するように移動させるBox Alignmentなど、仕様を、彼らができるように、GridおよびBlockレイアウトを使用します。

• break-before
• break-after
• break-inside

次の例では、Iは<figure>元素使用break-inside avoid画像とタイトルとの分離を防止する性質を。プロパティブラウザをサポートし、我々はそれが列の内容になり場合でも、一緒に共同の効果を確認すべきであるがアンバランスになります。

例リンク

[プレビュー]をクリックします

// 核心代码

figure {
  margin: 0;
  break-inside: avoid;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
}复制代码

残念ながら、中にmulticolこれらの属性のサポートは非常に不完全です。実際の使用でコンテンツを分離する必要があるかどうかを制御するための要件の多くを作らされますが、実際には、ブラウザと本当に彼らはコンテンツから分離させていないためであっても支持体の場合には、彼らは、提案として見られるべきです。上記の例では、優先順位のショーを定義していますが、使用したりする場合は注意が、それが最も必要とされる場合にのみ使用します。

いくつかの問題の列レイアウト

私たちはウェブをブラウズし、表示されませんでした場合はmulticol、広く使用されている、その理由は、通常、トップダウンで読むためにスクロールし、読者の習慣を読んでいます。英語を使用する人、または他の縦書きの場合は、水平方向のレイアウトは良い読書体験ではありません。

あなたは、コンテナの高さを固定した場合、例えば、viewport単位は、vh含有量が多すぎると、あなたは水平スクロールバーを取得する一方で、それは、オーバーフローの方向をインライン化します。

例リンク

[プレビュー]をクリックします

これらのケースは非常に満足のいくものではありません。マルチカラムのレイアウトを使用するときに、我々は慎重に各列のコンテンツの量を考慮する必要があります。

列のオーバーフロー・ブロック

ではLevel 2、我々はメソッドを使用する方法を検討し、仕様、列の内容は、発生する横スクロールバーをオーバーフローしませんが、カラム方向に上記の新しいブロックを生成します。これは、あなたが持つ高度持つことができることを意味しmulticolた容器を、コンテンツがコンテナの幅を超えると、それは以下に列挙されている新しいセットを作成します。それは、ビット上記の例を横切るように見えますが、セットにするためにはないcolumn-spanオーバーフローの問題を解決するために、起動する新しい列ボックス内の要素の結果のを、しかし、コンテナの幅のブロックサイズの制限によって。

この機能は有効になりmulticol、より便利なWebへ。我々はまだいくつかの距離ですが、あなたはに集中することができますが、CSSワーキンググループの買戻しの問題。この機能のために他のユースケースを持っている場合は、新しい機能を設計するとき、それは非常に便利です、それらを投稿してください。

今日、どのように我々はMULTICOLを使用していますか？

現在の標準を使用して、関係なく、ローリング問題の列のすべての内容を分割することは推奨されません。しかし、いくつかのケースでは、multicolすることがweb理想的であること。デザインモードを表示する場合は、ご参考のために、kの十分な例があります。

UIのテキスト要素または折りたたまれた小さな

multicolあなたがプロジェクトのリストでより少ないスペースを取る必要があるどこでも使用することができます。例えば、単純なリストまたは名前のリストは、ボックスをチェックします。通常、これらの例では、訪問者が1を読んでいないだろうし、次の列の先頭に戻るが、コンテンツをスキャンすると、選択されるように、チェックボックスや項目を選択する]をクリックします。あなたがスクロール体験を作る場合でも、問題がまだ存在しています。

あなたはできるウェブサイトをDonarMuseum見るためにサンダー・デ・ヨングは、このように使用multicol例。

少量の内容を確認してください

時々 、私たちはウェブサイトを設計し、我々はコンテンツ領域の一部が比較的小さく、ほとんどの画面表示に合わせて、スクロールを必要としないことを知っています。私は、デモページNotist使用multicol紹介のスピーチのために。

アンディ・クラークが  あるEqufundのウェブサイト  素敵な例を設計します。

ページをスクロールする主要な非常に小さな画面を避けるために、単に幅として、あなたは高さを確認するためにメディアクエリを使用することができ、表示されます。最小の高さを超えたコンテンツについて、あなたはブレークポイントを設定することができますmin-height貧しい経験をもたらし小さいユーザ装置の使用を避けること。

概要カスケード（石材-LIKE）ショー

あなたは、コンテンツ滝のディスプレイを作成したい場合は、別のローカルマルチカラムレイアウトが美しく働きます。Multicolそれはあなたが非常に不確実レイアウト方法を作成することができ、現在唯一です。Gridいずれの構成は、ギャップを残したり、厳密な二次元のグリッドを形成するためのプロジェクトを伸ばすであろう。

Veerleピータースはその良い例が彼女であり、インスピレーションページこのように使用しますmulticol。

グリッドおよび代替フレキシボックス

これらcolumn-のプロパティを使用することも可能GridとFlex レイアウトオプション。あなたは、コンテナが使用されているプロパティを指定した場合display: flexまたはdisplay: grid任意の列の振る舞いを削除するには、それがコンテナに変換されFlexたりGrid、レイアウト。たとえば、あなたが使用する必要があればGrid、それは代わりに、ページ上の列に実行するのでは、レイアウトが読み取り可能な場合は、あなたが使用することができ、カードレイアウトレイアウトをmulticolシンプルなバックアップとして。サポートされていないGridだろう、ブラウザmulticolのサポートを示してGrid取得するブラウザをGrid Layout。

MULTICOLを忘れないでください！

私はいつも答えるGridと、Flexbox答えは使用しないで、質問GridまたはFlexbox代わりにしてみてくださいMulticol。あなたは、各サイト上でそれを使用することはできませんが、あなたは、この資料に記載場面に遭遇したとき、それは非常に便利です。MDNで約MULTICOLとCSSの断片モジュールの有用なリソースへ。

あなたがプロジェクトを持っている場合はmulticol、他の利用シナリオ、また共有するためのメッセージを歓迎します！

この記事では、元の作者に連絡をしており、元のリンクを保持してください転載、翻訳を許可します

ます。https：//juejin.im/post/5cfc2ff76fb9a07f0a2dd290で再現