다른 Flex 항목으로 둘러싸여 있을 때 컨테이너의 가운데 Flex 항목을 배치합니다.

Question

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

모든 경우에

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

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

또한 이 기사를 읽은 후 배운

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

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

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

<code><div class="container">
  <h2>저는 h2</h2>입니다.
  <span>저는 스팬 1</span>
  <span>저는 2학년입니다</span>
  <span>저는 3학년입니다</span>
</div>
<div class="컨테이너">
  <span>저는 스팬 1</span>
  <span>저는 2학년입니다</span>
  <span>저는 3학년입니다</span>
  <h2>저는 h2</h2>입니다.
  <span>저는 4학년입니다</span>
  <span>저는 5학년입니다</span>
  <span>저는 6학년입니다</span>
</div>
<div class="컨테이너">
  <span>저는 스팬 1</span>
  <span>저는 2학년입니다</span>
  <h2>저는 h2</h2>입니다.
  <span>저는 3학년입니다</span>
</div></code>

<인용문>

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

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

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

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

<시간/>

Michael Benjamin이 응답한 후:

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

HTML

  

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

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

Answer 1

한 가지 방법은 양쪽에 빈 범위를 추가한 다음 범위와 h2를 다음과 같은 일부 플렉스 값으로 설정하는 것입니다.

으아악 으아악

그래서 양쪽의 공간이 동일한지 확인하세요. 유일한 문제는 h2가 얼마나 넓은 범위를 차지할지 결정해야 한다는 것입니다.

Answer 2

Flex 정렬 속성은 컨테이너에서 사용 가능한 공간을 할당하여 작동합니다.

따라서 Flex 항목이 다른 항목과 공간을 공유하는 경우 양쪽에 있는 형제 항목의 총 길이가 동일하지 않는 한 한 번에 중앙에 배치할 수 있는 방법은 없습니다

.

h2 两侧的跨度总长度相等。因此，h2두 번째 예에서는

가 완전히 용기 중앙에 있습니다.

🎜 으아악 으아악