다른 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>