CSS で Flex アイテムをコンテンツの幅に適応させるにはどうすればよいですか?

フレックス項目をコンテンツの幅に適応させる

CSS フレックスボックスを使用して要素を配置すると、項目が意図した幅を超えて拡張される場合があります。これは、親コンテナの幅ではなく、項目の幅をそのコンテンツによって決定したい場合に特にイライラする可能性があります。

解決策:

フレックスを作成するにはアイテムはコンテンツの幅に適応するため、次の 2 つのプロパティを使用できます:

1。 Align-Items: Flex-Start

親コンテナで、align-items を flex-start に設定します。これにより、項目が交差軸 (この場合は水平方向) に沿ってコンテナーの開始端に整列されます。

2. Align-Self: Flex-Start

または、flex 項目で align-self: flex-start を直接使用することもできます。これは、親コンテナから継承するデフォルトの align-self プロパティをオーバーライドします。

例:

次のコードを考えてみましょう:

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

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

これにより、 が表示されます。コンテナ内で垂直方向に整列しながら、要素の幅をコンテンツに合わせて調整します。

説明:

align-items: flex-start または align-self: を使用します。 flex-start を使用すると、フレックス項目のデフォルトのストレッチ動作がオーバーライドされます。これにより、項目は親の幅に拡張されるのではなく、そのコンテンツに必要なスペースのみを占めるようになります。

以上がCSS で Flex アイテムをコンテンツの幅に適応させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。