콘텐츠가 항목 너비를 초과할 때 Flexbox 항목 내에서 텍스트를 정렬하는 방법은 무엇입니까?

Flexbox를 사용한 텍스트 정렬: Justify-Content 및 Text-Align 이해

Flexbox에서 justify-content 속성은 flex 항목을 텍스트에 따라 정렬합니다. 기본 축에 있고 text-align은 해당 플렉스 항목 내의 텍스트 내용을 정렬합니다. Flex 항목 내의 콘텐츠가 너비를 초과하면 정렬 불일치가 발생할 수 있습니다.

기본 텍스트 정렬 동작

기본적으로 텍스트는 왼쪽 정렬(또는 오른쪽에서 왼쪽으로 쓰는 언어에서는 오른쪽 정렬됨). justify-content: center를 flexbox 컨테이너에 사용하면 flex 항목이 컨테이너 내에서 수평으로 중앙에 배치됩니다. 그러나 이 정렬은 해당 콘텐츠가 아닌 Flex 항목 자체에만 적용됩니다.

콘텐츠 너비가 항목 너비를 초과하는 경우

텍스트 콘텐츠가 Flex 항목보다 넓은 경우 , 항목이 사용 가능한 전체 너비를 차지하기 때문에 항목을 더 이상 정렬(예: 중앙 정렬 또는 양쪽 정렬)할 수 없습니다. 결과적으로 텍스트는 기본 왼쪽 정렬 스타일을 유지합니다.

텍스트 정렬로 정렬 수정

Flex 항목 내에서 텍스트를 가운데에 맞추려면 다음을 수행해야 합니다. 명시적으로 text-align을 설정합니다: 플렉스 항목이나 해당 상위 컨테이너에 중심을 둡니다. 이는 기본 왼쪽 정렬 동작을 재정의하고 원하는 방식으로 텍스트 내용을 정렬합니다.

예:

<code class="css">.flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  text-align: center;
}</code>

이 예에서 flex-item 클래스는 text-align: center가 포함되어 있어 항목 너비에 관계없이 텍스트 내용이 각 플렉스 항목 내에서 중앙에 배치됩니다.

위 내용은 콘텐츠가 항목 너비를 초과할 때 Flexbox 항목 내에서 텍스트를 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!