Flexbox를 사용하여 요소를 왼쪽과 가운데 정렬
P粉545682500
2023-08-27 21:54:23
<p>Flexbox를 사용하여 하위 요소를 정렬하고 있습니다. 내가 원하는 것은 한 요소를 중앙에 배치하고 다른 요소를 왼쪽에 정렬하는 것입니다. 일반적으로 나는 <code>margin-right: auto</code>를 사용하여 왼쪽 요소를 설정합니다. 문제는 중앙 요소를 중앙에서 멀리 밀어내는 것입니다. 절대 위치 지정을 사용하지 않고도 이것이 가능합니까? </p>
<p><strong>HTML 및 CSS</strong></p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#parent {
항목 정렬: 중앙;
테두리: 1px 단색 검정;
디스플레이: 플렉스;
내용 정당화: 센터;
여백: 0 자동;
너비: 500px;
}
#왼쪽 {
여백 오른쪽: 자동;
}
#센터 {
여백: 자동;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="parent">
<span id="left">왼쪽
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
세 번째 빈 요소 추가:
으아악및 다음 스타일:
으아악왼쪽과 오른쪽만 성장할 것이고, 그 사실로 인해...
...중앙 요소는 항상 완벽하게 중앙에 위치합니다.
제 생각에는 이것이 허용된 답변보다 훨씬 낫습니다. 왜냐하면 왼쪽 콘텐츠를 오른쪽으로 복사하고 양쪽에서 동일한 너비를 얻기 위해 숨길 필요가 없기 때문입니다. 마법처럼 발생합니다(flexbox는 마술입니다).
실제 작업:
편집: 아래 Solo의 답변 을 참조하세요. 이는 더 나은 솔루션입니다.
Flexbox의 기본 아이디어는 컨테이너 내에서 가변 크기의 요소를 쉽게 정렬할 수 있는 프레임워크를 제공하는 것입니다. 따라서 요소의 너비를 완전히 무시하는 레이아웃을 제공하는 것은 의미가 없습니다. 본질적으로 이것이 절대 위치 지정의 목적입니다. 요소를 정상적인 흐름에서 빼내기 때문입니다.
내가 아는 한
position:absolute;를 사용하지 않고는 이 작업을 수행할 수 있는 좋은 방법이 없으므로 이를 사용하는 것이 좋습니다... 하지만 정말로 그렇게 하고 싶지 않거나 절대 위치 지정을 사용할 수 없다면 다음을 사용할 수 있을 것 같습니다. 다음 해결 방법 중 하나를 사용하세요."왼쪽" div의 정확한 너비 를 알고 있는 경우
으아악justify-content更改为flex-start(왼쪽)을 넣은 다음 "가운데" div를 다음과 같이 정렬할 수 있습니다.너비를 모르는 경우 오른쪽의 "왼쪽"을 복사하고
justify-content: space- Between;를 사용한 다음 새 오른쪽 요소를 숨길 수 있습니다. 분명히 말하면 이건 정말 정말 보기 흉합니다... 내용을 복사하는 것보다 절대 위치 지정을 사용하는 것이 더 좋습니다. :-)