Flex 항목을 CSS의 콘텐츠 너비에 맞게 조정하려면 어떻게 해야 합니까?

Flex 항목을 콘텐츠 너비에 맞게 조정

CSS flexbox를 사용하여 요소를 정렬하면 항목이 의도한 너비 이상으로 확장되는 경우가 있습니다. 이는 상위 컨테이너의 너비가 아닌 해당 내용에 따라 항목의 너비를 결정하려는 경우 특히 실망스러울 수 있습니다.

해결책:

유연하게 만들려면 항목이 콘텐츠 너비에 맞게 조정되면 두 가지 속성을 사용할 수 있습니다:

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를 사용하면 플렉스 항목의 기본 늘이기 동작이 재정의됩니다. 이렇게 하면 항목이 상위 항목의 너비로 확장되지 않고 콘텐츠에 필요한 공간만 차지하게 됩니다.

위 내용은 Flex 항목을 CSS의 콘텐츠 너비에 맞게 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!