Flex 컨테이너에 래핑될 때 `justify-content: center` 텍스트가 중앙에 배치되지 않는 이유는 무엇입니까?

justify-content로 텍스트가 중앙에 위치하지 않음: center

이 문제는 Flex 컨테이너 내의 콘텐츠가 너무 길어서 래핑이 발생하는 경우에 발생합니다. . 콘텐츠가 justify-content:center를 사용하여 가로 중앙에 배치되어 있지만 래핑 중에 정렬이 중단됩니다.

Flexbox의 세 가지 수준 이해

플렉스 컨테이너 구조는 세 가지 수준으로 구성됩니다.

• 컨테이너
• 항목
• 콘텐츠

각 레벨은 독립적인 요소를 나타냅니다.

Flex 컨테이너의 정당성

justify-content는 컨테이너 내 플렉스 항목의 정렬을 제어하지만 항목의 하위 항목(이 경우 텍스트)에는 직접적인 영향을 미치지 않습니다.

Flex 컨테이너의 너비가 콘텐츠의 너비를 초과하는 경우 Flex 항목은 콘텐츠에 맞게 축소되고(맞게 축소) 가로 중앙에 배치됩니다. 항목 내의 콘텐츠는 자동으로 이 정렬을 따릅니다.

콘텐츠가 Flex 컨테이너를 초과할 때 정렬

그러나 콘텐츠가 Flex 컨테이너보다 넓어지면 Flex 항목은 다음을 수행할 수 있습니다. 더 이상 정렬되지 않습니다. 항목이 컨테이너 너비 전체를 차지하므로 정렬할 여유 공간이 부족합니다.

텍스트 정렬

오정렬에도 불구하고 text-align: center가 적용되지 않았습니다. 기본적으로 텍스트. 직접 중앙에 배치하려면 text-align: center를 Flex 항목이나 Flex 컨테이너에 명시적으로 추가해야 합니다.

코드 예

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>

위 내용은 Flex 컨테이너에 래핑될 때 `justify-content: center` 텍스트가 중앙에 배치되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!