다른 Flex 항목으로 둘러싸여 있을 때 컨테이너의 가운데 Flex 항목을 배치합니다.-PHP 중국어 네트워크 Q&A

플렉스박스가 있습니다(아래 코드 조각 예시 참조).

모든 경우에

가 flex-box 마크업에 따라 그 주위로 흐릅니다.

기본적으로 `align-self` CSS 코드를 찾고 있지만 가로 축이 아닌 주 축을 찾고 있습니다(내가 요구하는 내용을 설명하는 데 도움이 될 수 있음).

또한 이 기사를 읽은 후 배운

에 margin: auto;를 적용했습니다. 나는 모든 것을 완전히 이해하지 못한다는 점을 제외하고는 다음과 같은 질문을 남깁니다.

제가 받은 코드는 다음과 같습니다.

.container { 항목 정렬: 중앙; 테두리: 1px 단색 빨간색; 디스플레이: 플렉스; 내용 정당화: 센터; 너비: 100%; } h2 { 여백: 자동; ]

 저는 h2
입니다. 저는 스팬 1 저는 2학년입니다 저는 3학년입니다 
  저는 스팬 1 저는 2학년입니다 저는 3학년입니다 저는 h2
입니다. 저는 4학년입니다 저는 5학년입니다 저는 6학년입니다 
  저는 스팬 1 저는 2학년입니다 저는 h2
입니다. 저는 3학년입니다

<인용문>

제 질문을 완전히 다시 말하면: 다른

를 내 페이지의 중앙에 배치하는 방법을 알고 싶습니다. code>,

는 항상 Flexbox의 데드 센터에 있습니다.

P.S.: 저는 JavaScript와 jQuery를 사용할 의향이 있지만 이 작업을 수행하는 데에는 순수한 CSS 방식을 선호합니다.

<시간>

Michael Benjamin이 응답한 후:

그의 대답은 저를 생각하게 만들었습니다. 아직 이를 수행할 방법을 찾지 못했지만 다음은 올바른 방향으로 나아가는 단계라고 생각합니다.

HTML

저는 스팬 1 저는 2학년입니다 저는 3학년입니다

저는 h2

입니다.

저는 4학년입니다 저는 5학년입니다 저는 6학년입니다

CSS

.container div { 플렉스: 1 1 자동; 텍스트 정렬: 중앙; } h2 { 플렉스: 0 0 자동; 여백: 자동; }

.container { 항목 정렬: 중앙; 테두리: 1px 단색 빨간색; 디스플레이: 플렉스; 내용 정당화: 센터; 너비: 100%; } .컨테이너 div { 플렉스: 1 1 자동; 텍스트 정렬: 중앙; } h2 { 플렉스: 0 0 자동; 여백: 자동; }

  
 저는 h2
입니다.  저는 스팬 1 저는 2학년입니다 저는 3학년입니다 
 
   저는 스팬 1 저는 2학년입니다 저는 3학년입니다 
 저는 h2
입니다.  저는 4학년입니다 저는 5학년입니다 저는 6학년입니다 
 
   저는 스팬 1 저는 2학년입니다 
 저는 h2
입니다.  저는 3학년입니다

기본적으로 의 총 수는 알 수 없지만 총 3개의 요소가 있는 것으로 알려져 있습니다.

< ;h2>

<인용문>

위의 코드 조각에서 볼 수 있듯이 저는 (flex: 0 0 auto 및 flex: 1 1 auto 등)을 시도했습니다. 작동하지만 아직 작동하지 않았습니다. 이것이 올바른 방향으로 나아가는 단계인지, 그리고 이를 실제 제품에 적용하는 방법을 알려줄 수 있는 사람이 있나요?