부모 컨테이너가 아닌 콘텐츠에 따라 Flex 항목의 너비를 결정하는 방법은 무엇입니까?

Flex 항목이 상위 너비 대신 콘텐츠 너비를 차지하도록 만드는 방법

Flexbox는 요소를 정렬하는 편리한 방법을 제공합니다. 그러나 기본적으로 Flex 항목은 상위 컨테이너의 너비까지 확장됩니다. 이 동작이 항상 바람직하지는 않습니다.

문제:

하위 앵커() 요소가 있는 플렉스 컨테이너가 있습니다. 전체 상위 너비로 확장되지 않고 콘텐츠에 따라 너비가 결정되는 하위 항목을 "인라인"으로 표시하려면 어떻게 해야 합니까?

실패한 시도:

inline-flex에 대한 자식의 표시 속성은 그렇지 않습니다.

해결책:

다음 전략을 사용하세요.

1. align-items 사용: 컨테이너에서 flex-start:

이렇게 하면 모든 flex 항목이 위쪽으로 수직으로 정렬되도록 설정됩니다. 기본 "늘이기" 정렬을 재정의하여 항목이 전체 상위 너비로 확장되지 않도록 합니다.

2. Flex 항목에 align-self: flex-start 사용:

이것은 특정 Flex 항목의 정렬을 맨 위로 설정하고 다른 Flex와 독립적으로 자체 정렬을 제어합니다. items.

예:

.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 항목의 너비를 결정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!