고르지 않은 주변 요소가 있는 컨테이너에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?

다른 Flex 항목 가운데 컨테이너의 Flex 항목 중앙에 배치

과제:

다양한 수의 요소.

접근 방식:

플렉스 정렬 속성은 컨테이너 내의 여유 공간을 분산하므로, 고르지 않은 형제 사이에 단일 항목을 중앙에 배치하는 것은 추가 조치 없이는 어렵습니다.

고려사항:

전체 길이가 주변 요소가 항목 양쪽에서 동일하면 중심 정렬이 가능해집니다.

해결책:

컨테이너에 남아 있는 내용과 동일한 전체 길이를 보장합니다.

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <div>
    <h2>I'm an h2</h2>
  </div>
  <div>
    <span>I'm span 3</span>
  </div>
</div></code>

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

.container div {
  flex: 1 1 auto;  // Equalize flex sizing
  text-align: center;
}

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>

설명:

내부

컨테이너를 "1 1 auto"로 설정하면 Flex 컨테이너 내에서 동일한 공간을 차지합니다.

의 flex 속성은 flex 공간 분포에서 제외되어 "0 0 auto"로 설정됩니다. 여백 자동은

컨테이너.

추가 정보:

• 요소는 해당
  텍스트 정렬 속성으로 인해 컨테이너가 손상되었습니다.
• 이 접근 방식은

  완벽하게, 주변 컨텐츠의 길이가 동적인 경우에는 적합하지 않을 수 있습니다.

위 내용은 고르지 않은 주변 요소가 있는 컨테이너에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：정의된 CSS 높이 규칙 없이 Div의 높이를 얻는 방법은 무엇입니까? 다음 기사：`` 내에서 `` 요소를 수직으로 정렬하는 방법은 무엇입니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

2

1724

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

10

1880

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1591

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1508

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1546

관련 주제

더>

• 휴대폰 루트
• 컴퓨터 시작시 입력이 지원되지 않는 문제 해결
• busyboxv1.30.1을 부팅할 수 없습니다.
• 팀뷰어 연결이 안되는 문제 해결 방법
• C 언어에는 여러 가지 출력 및 입력 함수가 있습니다.
• 주파수 기능 사용 방법
• 위챗과 위챗의 차이점은 무엇인가요?
• OuYi Exchange는 합법적인가요?