フレックスアイテムで親コンテナの幅ではなくコンテンツの幅を使用するようにするにはどうすればよいですか?

フレックス項目に親コンテナの幅ではなくコンテンツの幅を取得する方法

表示: フレックスと子要素がラップされたコンテナを使用する場合内部では、子の幅が独自のコンテナによって決定されるのではなく、親コンテナに一致するように拡張されるという問題が発生する可能性があります。 content.

解決策:

この問題を修正し、子の幅がコンテンツによって決定されるようにするには、次の手順に従います。

1. 親コンテナに align-items:flex-start を適用します。これにより、デフォルト設定の align-items:stretch がオーバーライドされ、フレックス項目がコンテナの幅全体に引き伸ばされます。
2. あるいは、align-self: flex-start をフレックス項目に直接適用することもできます。自体。これにより、コンテナ内のすべての flex アイテムに影響を与えるのではなく、設定が特定のアイテムに限定されます。

要約すると、コンテナ上で align-items: flex-start または align-self: flex- を使用します。項目から始めると、子要素が親のストレッチプロパティを継承するのを防ぎ、その幅をそのコンテンツによって決定できるようにすることができます。

以上がフレックスアイテムで親コンテナの幅ではなくコンテンツの幅を使用するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。