Flex 항목이 컨테이너 너비로 늘어나는 것을 방지하는 방법은 무엇입니까?

Flex 항목을 컨테이너 너비가 아닌 콘텐츠에 맞추는 방법

Flex 레이아웃에서는 요소가 자연스럽게 늘어나 상위 항목의 너비를 채웁니다. 컨테이너. 하위 요소가 해당 콘텐츠만 래핑하도록 하려는 경우 이는 바람직하지 않을 수 있습니다. 이 동작을 적용하는 방법은 다음과 같습니다.

align-items/align-self를 사용하는 솔루션

align-items 설정: 컨테이너에서 flex-start 또는 align-self : 플렉스 항목에 대한 플렉스 시작. 이는 기본 align-items: Stretch를 재정의합니다. 이는 flex 방향이 열일 때 컨테이너의 가로 공간을 채우기 위해 항목을 확장합니다.

작동 방식

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과 유사 -항목, 그러나 개별 플렉스 항목에만 해당됩니다.

위 내용은 Flex 항목이 컨테이너 너비로 늘어나는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!