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

フレックス項目が親の幅ではなくコンテンツの幅を占めるようにする方法

フレックスボックスは、要素を配置する便利な方法を提供します。ただし、デフォルトでは、フレックス項目は親コンテナの幅まで拡張されます。この動作は必ずしも望ましいとは限りません。

問題:

子アンカー () 要素を持つフレックス コンテナーがあります。親の幅全体に拡張するのではなく、その内容によって幅が決まる子を「インライン」で表示するにはどうすればよいですか?

失敗した試行:

inline-flex に対する子の表示プロパティは機能しません。

解決策:

次の戦略を使用します:

1.コンテナ上で align-items: flex-start を使用します:

これにより、すべての flex アイテムが上部に垂直に配置されます。これはデフォルトの「ストレッチ」配置をオーバーライドし、項目が親の幅全体に拡張されないようにします。

2. Flex アイテムで align-self: flex-start を使用します:

これにより、特定のフレックス アイテムの配置が先頭に設定され、他のフレックスとは独立して独自の配置が制御されます。 items.

例:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

a {
  padding: 10px 40px;
  background: pink;
}

説明:

align-items を使用する: flex-start または align -self: flex-start は、関連する flex 項目をコンテナの先頭に沿って配置する必要があることを効果的に示します。軸を横切り（垂直）、親の幅全体に拡張しないでください。これにより、アイテムの幅をそのコンテンツによって決定でき、目的の「インライン」効果を実現できます。

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