CSS で align-self プロパティをデフォルト値に設定するにはどうすればよいですか?

CSS (カスケード スタイル シート) は、aligning と Web ページ上の要素の配置のための一連のプロパティを提供する強力なツールです。 align-self プロパティは、Flex コンテナ内の個々の Flex アイテムの配置を調整するために CSS で使用できる多くのプロパティの 1 つです。デフォルトでは、align-self は auto に設定されており、これは要素が親コンテナの配置を継承することを意味します。ただし、この動作は、align-self プロパティを設定することで、個々の Flex プロジェクトに対して変更できます。

リーリー

CSS の align-self 属性

align-self プロパティをデフォルト値にリセットする方法を説明する前に、align-self とは何かを理解することが重要です。 align-self プロパティは、flex 短縮プロパティのサブプロパティであり、単一の flex 項目をコンテナの水平軸に沿って配置するために使用されます。 align-self 属性のデフォルト値は auto で、これにより要素は親コンテナの align-items 属性を継承します。 align-self 属性は、次のいずれかの値に設定できます。 -

• 自動 (デフォルト)、

• Flex が開始します、

• フレックス側、

＃＃＃＃＃＃中心、＃＃＃＃＃＃

• ベースライン、および

＃＃＃＃＃＃ストレッチ＃＃＃＃＃＃

• align-self 属性が auto 以外の値に設定されている場合、その特定の要素のコンテナの align-items 属性がオーバーライドされます。

CSS で align-self をデフォルト値にリセットする

• align-self 属性をデフォルト値にリセットするには、要素の CSS 宣言から属性の auto 値を削除するだけです。例えば＃＃＃ リーリー

  align-self 属性が宣言から削除されると、デフォルト値にリセットされます。
リーリー

次に、CSS で align-self プロパティをデフォルト値にリセットする例をいくつか見ていきます。

自動値を使用する

align-self 属性をデフォルト値にリセットする簡単な方法は、それを auto に設定することです。 align-self の値が auto に設定されている場合、Flex アイテムは、Flex コンテナに設定されている align-items プロパティの値に従って整列されます。

＃＃＃例＃＃＃

この例では、auto 値を使用して、.div1 または .div3 クラスを持たないすべての .item 要素を選択し、それらの align-self 属性を auto に設定します。これにより、.div1 と .div3 および要素のみがカスタムの align-self 値を持つようになります。

リーリー

:not() セレクターを使用する

:not() セレクターは、align-self プロパティをデフォルト値にリセットするもう 1 つの方法です。このセレクターを使用すると、特定の基準を満たさないすべての要素を選択できます。 :not() セレクターを使用すると、特定の align-self 値を適用する要素を除くすべての要素を選択できます。

＃＃＃例＃＃＃

この例では、:not() セレクターを使用して、.box1 または .box3 クラスを持たないすべての .item 要素を選択し、それらの align-self 属性を auto に設定します。これにより、.box1 と .box3 および要素のみがカスタム align-self 値を持つようになります。

リーリー ＃＃＃結論は＃＃＃

align-self プロパティは、Flex コンテナ内の Flex アイテムの垂直方向の配置を設定するための強力なツールです。ただし、CSS の align-self プロパティをデフォルト値にリセットする必要がある場合があります。 align-self プロパティをデフォルト値の auto にリセットするか、代わりに align-items を使用することで、CSS を簡素化し、配置の問題を回避できます。

以上がCSS で align-self プロパティをデフォルト値に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。