Flexbox를 사용하여 왼쪽과 가운데 정렬: 절대 위치 지정이 없는 솔루션
Flexbox를 사용하여 하위 요소를 정렬하는 경우 정렬이 어려울 수 있습니다. 절대 위치 지정을 사용하지 않고 한 요소를 왼쪽에 배치하고 다른 요소를 중앙에 배치합니다. 추가 빈 요소를 사용하는 솔루션은 다음과 같습니다.
HTML:
<code class="html"><div class="parent"> <div class="left">Left</div> <div class="center">Center</div> <div class="right"></div> </div></code>
CSS:
<code class="css">.parent { display: flex; } .left, .right { flex: 1; } /* Styles for demonstration */ .parent { padding: 5px; border: 2px solid #000; } .left, .right { padding: 3px; border: 2px solid red; } .center { margin: 0 3px; padding: 3px; border: 2px solid blue; }</code>
설명:
이 접근 방식은 절대 위치 지정이나 왼쪽 콘텐츠를 오른쪽에 복제할 필요 없이 일관되고 중앙 정렬을 생성합니다.
위 내용은 절대 위치 지정 없이 Flexbox를 사용하여 한 요소를 왼쪽으로 정렬하고 다른 요소를 가운데로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!