Flex 항목이 상위 컨테이너 너비 대신 콘텐츠 너비를 사용하도록 만드는 방법은 무엇입니까?

Flex 항목이 상위 컨테이너 너비 대신 콘텐츠 너비를 갖도록 만드는 방법

디스플레이가 있는 컨테이너를 사용하는 경우: flex 및 하위 요소가 래핑됨 내에서 하위 컨테이너의 너비가 자체적으로 결정되는 대신 상위 컨테이너와 일치하도록 확장되는 문제가 발생할 수 있습니다. content.

해결책:

이 문제를 해결하고 하위 콘텐츠의 너비가 콘텐츠에 따라 결정되도록 하려면 다음 단계를 따르세요.

1. align-items: flex-start를 상위 컨테이너에 적용합니다. 이는 flex 항목이 컨테이너의 전체 너비까지 늘어나도록 하는 align-items: Stretch의 기본 설정을 재정의합니다.
2. 또는 align-self: flex-start를 flex 항목에 직접 적용할 수도 있습니다. 그 자체. 이렇게 하면 컨테이너의 모든 플렉스 항목에 영향을 주지 않고 특정 항목으로 설정이 제한됩니다.

요약하자면, align-items: flex-start를 컨테이너에 사용하거나 align-self: flex-를 사용하면 됩니다. 항목에서 시작하면 하위 요소가 상위 요소의 늘이기 속성을 상속하지 못하게 하고 너비가 콘텐츠에 따라 결정되도록 할 수 있습니다.

위 내용은 Flex 항목이 상위 컨테이너 너비 대신 콘텐츠 너비를 사용하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!