Flexbox를 사용하여 CSS 레이아웃 컨테이너의 여러 요소를 가로 가운데에 배치하는 방법

이 글에서는 주로 CSS를 사용하여 Flexbox 레이아웃 컨테이너의 여러 요소를 가로 가운데에 배치하는 방법을 자세히 소개합니다. Flexbox를 사용하여 레이아웃 컨테이너의 여러 요소를 가로 가운데에 배치하는 방법은 무엇인가요? 이 글에서 관심 있는 친구들은

을 참고하면 됩니다. 이러한 부모 요소를 구현하려면 부모 요소의 모든 자식 요소가 중앙에 위치해야 합니다.

상위 요소에 스타일을 추가하면 됩니다.

코드는 다음과 같습니다.

{display: flex;flex-direction: column;align-items:center;}

flexbox 레이아웃으로 설정하고 방향은 세로 배열, 세 번째 문장은 가운데 배치합니다.

세 하위 요소 사이의 거리를 직접 설정하려면 margin-top 또는 margin-bottom을 설정하세요.

자동으로 조정하려면 추가 스타일을 추가하면 됩니다. 위의

코드는 다음과 같습니다.

{justify-content：space-around;}

이렇게 하면 각 요소 주위에 나머지 공간이 자동으로 할당됩니다.)

처음에는 Sass를 사용할 필요가 없다고 생각했는데, 이제 많은 CSS 코드가 여전히 재사용 가능하다는 것을 알게 되었습니다.

이 경우 매개변수 전달을 위해 작은 믹스인을 저장해 두었는데 기본적으로 자동으로 조정됩니다. 매개변수 false를 전달하고 자동으로 조정하지 않을 수도 있습니다

@mixin multi-elements-center($auto:true){   
display:flex;   
flex-direction:column;   
align-items:center;   
@if $auto{justify-content:space-around;}   
}

매일 우리는 조금씩 발전하고 있으며 모두가 함께 열심히 노력하여 기술 수준을 향상시킵니다.

위 내용은 Flexbox를 사용하여 CSS 레이아웃 컨테이너의 여러 요소를 가로 가운데에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!