CSS 列とは何ですか?また、それに値を設定する方法は何ですか?

Web ページの列を管理するためにさまざまな CSS プロパティを使用できます。「column-fill」もその 1 つです。 column-fill CSS プロパティは、複数の列のコンテンツの外観を設定するために使用されます。たとえば、すべての列間で自然に流れたり、バランスが取れたりする必要があります。

アプリケーションのユーザー エクスペリエンスを向上させるために、すべての列に同じコンテンツを設定する必要がある場合があります。

ユーザーは、次の構文に従って列塗りつぶし CSS プロパティを使用できます。

列塗りつぶしCSSプロパティ値

• auto

  - 自然な流れでコンテンツを設定します。たとえば、最初の列に入力し、コンテンツを 2 番目の列にのみ送信します。

• バランス

  - すべての列に同じ内容を設定するために使用されます。

• Initial

  - デフォルト値である「バランス」を設定します。

• Inheritance

  - 親要素から列の fill プロパティの値を継承します。

例 1

以下の例では、2 つの div 要素を定義し、テキスト コンテンツを追加します。さらに、両方の div 要素に固定サイズを設定します。その後、列数を 2 に設定し、列パディングを自動に設定します。

出力では、最初に最初の列が入力され、次に 2 番目の列のみが入力されることがわかります。最初の列が完全に埋められていない場合、コンテンツは最初の列に残ります。

例 2

以下の例では、最初の要素と同様に 2 つの div 要素を定義します。その後、最初の div 要素の列数は 4 に等しく、2 番目の div 要素の列数は 3 に等しくなります。

さらに、2 つの div 要素の「column-fill」属性の「balance」値も設定します。出力では、コンテンツが複数の列にわたってどのようにバランスが取れているかがわかり、すべての列の下部には埋まっていないスペースも存在します。

ユーザーは、CSS の column-fill プロパティを使用して、複数の列の間にコンテンツを表示する方法を設定する方法を学びました。 「自動」高さの列間でコンテンツを均等に分割するには、バランス値を使用することをお勧めします。このようにして、下部スペースを克服できます。

以上がCSS 列とは何ですか?また、それに値を設定する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。