ホームページ  >  記事  >  ウェブフロントエンド  >  CSS でコンテンツを整列させるためのデフォルト値を設定するにはどうすればよいですか?

CSS でコンテンツを整列させるためのデフォルト値を設定するにはどうすればよいですか?

WBOY
WBOY転載
2023-08-30 09:09:06711ブラウズ

如何设置默认值来对齐 CSS 中的内容?

CSS は、主に Web ページのデザインとレンダリングに使用される Web 言語です。これは、カスタマイズ プロセスに役立つ多くのプロパティを提供します。これらのプロパティの 1 つは、「aligned content プロパティ 」です。

コンテンツの整列プロパティは、フレックスボックスまたはグリッドの一部である項目の間または周囲にスペースを割り当てるために使用されます。この属性の初期値は「Normal」です。離散アニメーションがあり、計算された値は常に指定された値と等しくなります。

これは継承可能なプロパティではないことに注意してください。これは、ほとんどのブラウザで広くサポートされているプロパティです。

このプロパティに指定できるさまざまな値を以下に説明します -

  • Start - コンテンツまたはアイテムのパッケージ化をコンテナ要素の先頭から開始する場合に使用します。

  • End - コンテンツまたはアイテムをコンテナ要素の最後からパックする場合に使用します。

  • Center - 整列されたコンテナの中央に子要素をパックするために使用されます。

  • Normal - これは、align content プロパティのデフォルト値です。

  • Flex-start - フレックスボックス タイプのコンテナの場合、開始端に沿って項目の整列を開始します。ただし、Flexbox ではないコンテナーで使用する場合は、これが開始とみなされます。

  • Flex-end - flex-start と同様、これも Flexbox タイプのコンテナで使用され、終了エッジに沿って項目の整列を開始します。ただし、Flexbox 以外のコンテナで使用した場合は終了とみなされます。

  • Space-Between - このプロパティを使用して指定された項目は、コンテナの水平軸に沿って、隣接する要素に沿って等間隔で配置されます。

  • Space-around - 間のスペースと同様に機能しますが、最初の要素の左側と最後の要素の右側のスペースは、その要素の半分に等しくなります。 2 つの隣接する要素間のスペース。

  • Space-evenly - これは単に、最初の要素の先頭から最後の要素の終わりまでの均等なスペースとは異なり、すべての要素間に等しいスペースがあることを意味します。最後の要素のスペース。

  • Stretch - 自動サイズ変更に関連付けられているコンテナ内の項目のサイズを自動的に変更します。

これに加えて、このプロパティの値として safeunsafe があります。これらは、alignment キーワードとともに使用され、オーバーフローによってデータ損失が発生するかどうかなど、コンテナーの特性に依存します。これらの条件に基づいて、位置合わせを維持するかどうかを選択します。

###例###

コンテンツ属性の整列

の例を以下に示します。

リーリー コンテンツを揃えるためにデフォルト値を設定する

デフォルト値

」という用語は、実際にはプロパティの「

初期値」を指す場合があります。配置項目のデフォルト値は「Stretch」です。 つまり、「通常」は特定の意味を持つ特別なキーワードに似ていますが、使用されるコンテキストに応じて変化すると言えます。特定のコンテキストがなければ、「通常」が何をするかを定義できないからです。

Normal は、無効として扱われて正しい値にフォールバックされるか、有効として扱われて正しい値にフォールバックされるため、心配することなくデフォルト値として使用できます。

###例###

整列コンテンツのデフォルト値を標準に設定するサンプルコードを以下に示します -

リーリー

コンテナ内のすべてのアイテムがデフォルト値の「normal」に従って配置されている、つまり、Flexbox コンテナの仕様に従って引き伸ばされていることがわかります。

###結論は###

全体として、CSS を使用して配置されたコンテンツのデフォルト値を設定することは、Web サイト全体で一貫したデザインを確保するための簡単で効果的な方法です。単一の値をデフォルトとして設定すると、各要素を個別に変更することなく、各ページのすべての要素の位置をすばやく調整できます。これにより、開発者もデザイナーも、あらゆるテーマやテーマに適合する一貫した外観を簡単に作成できるようになります。必要に応じて後で簡単に調整できます。

以上がCSS でコンテンツを整列させるためのデフォルト値を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事:CSS @page ルール次の記事:CSS @page ルール