フレックスボックスの子の幅を内容によって決定するにはどうすればよいですか?

Flexbox の子幅

display: flex を持つ親コンテナ div には子 a があります。コンテンツによって幅が決まる子を「インライン」で表示するにはどうすればよいですか?

解決策

コンテナ上で align-items: flex-start を使用するか、align-self を使用します。 : それぞれのフレックススタートchild.

分析

フレックス コンテナには、デフォルト設定の align-items:stretch があり、子要素が交差軸に沿って展開されます。 align-items: flex-start または align-self: flex-start を設定すると、子の幅の拡張を防ぎ、インラインの外観を実現できます。

追加情報

• align-self は個々のフレックス項目に適用されますが、align-items は全体に適用されますコンテナ。
• align-items: flex-start は、コンテナの先頭と軸を横切る位置合わせを保証します。

• フレックス位置合わせの詳細については、以下を参照してください。

  • [フレックスラップはどのように機能しますか?](link1)
  • [なぜ"justify-items" および "justify-self" プロパティ?](link2)

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