>  Q&A  >  본문

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

<p>플렉스박스가 있습니다(아래 코드 조각 예시 참조). </p> <p>모든 경우에 <code><h2></code>가 <strong>flex-box</strong> 마크업에 따라 그 주위로 흐릅니다. </p> <p>기본적으로 <code>align-self</code> CSS 코드를 찾고 있지만 가로 축이 아닌 주 축을 찾고 있습니다(내가 요구하는 내용을 설명하는 데 도움이 될 수 있음). </p> <p>또한 이 기사를 읽은 후 배운 <code><h2></code>에 <code>margin: auto;</code>를 적용했습니다. 나는 모든 것을 완전히 이해하지 못한다는 점을 제외하고는 다음과 같은 질문을 남깁니다. </p> <p>제가 받은 코드는 다음과 같습니다.</p> <p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>.container { 항목 정렬: 중앙; 테두리: 1px 단색 빨간색; 디스플레이: 플렉스; 내용 정당화: 센터; 너비: 100%; } h2 { 여백: 자동; ]</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><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></pre> </p> <인용문> <p>제 질문을 완전히 다시 말하면: 다른<code><span></ 위치에 상관없이 <code><h2></code>를 내 페이지의 중앙에 배치하는 방법을 알고 싶습니다. code>, <code><h2></code>는 항상 Flexbox의 <strong>데드 센터</strong>에 있습니다. </p> </인용문> <p>P.S.: 저는 JavaScript와 jQuery를 사용할 의향이 있지만 이 작업을 수행하는 데에는 순수한 CSS 방식을 선호합니다. </p> <시간/> <p>Michael Benjamin이 응답한 후:</p> <p>그의 대답은 저를 생각하게 만들었습니다. 아직 이를 수행할 방법을 찾지 못했지만 다음은 올바른 방향으로 나아가는 단계라고 생각합니다. </p> <p><strong>HTML</strong></p> <pre class="brush:php;toolbar:false;"><div class="컨테이너"> <div> <span>저는 스팬 1</span> <span>저는 2학년입니다</span> <span>저는 3학년입니다</span> </div> <h2>저는 h2</h2>입니다. <div> <span>저는 4학년입니다</span> <span>저는 5학년입니다</span> <span>저는 6학년입니다</span> </div>
<p><strong>CSS</strong></p> <pre class="brush:php;toolbar:false;">.container div { 플렉스: 1 1 자동; 텍스트 정렬: 중앙; } h2 { 플렉스: 0 0 자동; 여백: 자동; }</pre> <p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>.container { 항목 정렬: 중앙; 테두리: 1px 단색 빨간색; 디스플레이: 플렉스; 내용 정당화: 센터; 너비: 100%; } .컨테이너 div { 플렉스: 1 1 자동; 텍스트 정렬: 중앙; } h2 { 플렉스: 0 0 자동; 여백: 자동; }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><div class="container"> <div> </div> <h2>저는 h2</h2>입니다. <div> <span>저는 스팬 1</span> <span>저는 2학년입니다</span> <span>저는 3학년입니다</span> </div> </div> <div class="컨테이너"> <div> <span>저는 스팬 1</span> <span>저는 2학년입니다</span> <span>저는 3학년입니다</span> </div> <h2>저는 h2</h2>입니다. <div> <span>저는 4학년입니다</span> <span>저는 5학년입니다</span> <span>저는 6학년입니다</span> </div> </div> <div class="컨테이너"> <div> <span>저는 스팬 1</span> <span>저는 2학년입니다</span> </div> <h2>저는 h2</h2>입니다. <div> <span>저는 3학년입니다</span> </div> </div></code></pre> </p> <p>기본적으로 <code><span></code>의 총 수는 알 수 없지만 총 3개의 요소가 있는 것으로 알려져 있습니다. <code><div>< ;h2><div></code></p> <인용문> <p>위의 코드 조각에서 볼 수 있듯이 저는 (<code>flex: 0 0 auto</code> 및 <code>flex: 1 1 auto</code> 등)을 시도했습니다. 작동하지만 아직 작동하지 않았습니다. 이것이 올바른 방향으로 나아가는 단계인지, 그리고 이를 실제 제품에 적용하는 방법을 알려줄 수 있는 사람이 있나요? </p> </blockquote></p>
P粉042455250P粉042455250443일 전485

모든 응답(2)나는 대답할 것이다

  • P粉726234648

    P粉7262346482023-08-26 12:03:04

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

    으아악 으아악

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

    회신하다
    0
  • P粉428986744

    P粉4289867442023-08-26 00:15:33

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

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

    .

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

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

    🎜 으아악 으아악

    회신하다
    0
  • 취소회신하다