콘텐츠에 따라 Flexbox 하위 항목의 너비가 결정되도록 하려면 어떻게 해야 합니까?

Flexbox 하위 너비

display: flex가 있는 상위 컨테이너 div에는 하위 a가 있습니다. 콘텐츠에 따라 너비가 결정되는 하위 항목이 어떻게 "인라인"으로 나타날 수 있습니까?

해결책

정렬 항목 사용: 컨테이너에서 flex-start 또는 align-self : 각각에 대해 flex-start child.

분석

Flex 컨테이너에는 align-items의 기본 설정이 있습니다. 즉, 자식 요소가 교차 축을 따라 확장됩니다. align-items: flex-start 또는 align-self: flex-start를 설정하면 자식 너비 확장을 방지하고 인라인 모양을 얻을 수 있습니다.

추가 정보

• align-self는 개별 플렉스 항목에 적용되는 반면 align-item은 전체 플렉스 항목에 적용됩니다. 컨테이너.
• align-items: flex-start는 컨테이너 시작과 교차 축 정렬을 보장합니다.

• 플렉스 정렬에 대한 자세한 내용은 다음을 참조하세요.

  • [플렉스 랩은 어떻게 작동하나요?](link1)
  • [왜 플렉스 랩이 없나요? "justify-items" 및 "justify-self" 속성?](link2)

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