フレックスアイテムがコンテナの幅まで伸びないようにするにはどうすればよいですか?

フレックス項目をコンテナの幅ではなく強制的にコンテンツに合わせる方法

フレックス レイアウトでは、要素は親の幅を満たすように自然に引き伸ばされます。容器。これは、子要素にそのコンテンツのみをラップさせたい場合には望ましくない場合があります。この動作を強制する方法は次のとおりです。

align-items/align-self を使用した解決策

コンテナ上で align-items: flex-start を設定するか、align-self を設定します。 : フレックス項目のフレックススタート。これは、デフォルトの align-items:stretch をオーバーライドします。これにより、flex-direction が列の場合、アイテムがコンテナの水平スペースを満たすように展開されます。

仕組み

align-items: flex-start を設定すると、項目がコンテナの開始端に強制的に揃えられます。列方向が設定されているため、開始エッジは左端になります。これにより、項目はその内容と同じ幅のままになります。

例:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
a {
  padding: 10px 40px;
  background: pink;
}

関連概念

• 交差軸: プライマリ レイアウトに垂直な軸
• align-items: 交差軸に沿ってフレックス項目を配置します。
• align-self: と同様align-items ですが、個々の flex 項目に固有です。

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