Flexbox를 사용하여 요소 정렬

시작하기 전에: Flexbox 소개를 살펴보세요.

이 튜토리얼에서는 다음을 알아봅니다.

1. 개별 요소를 중앙에 배치하는 기술
2. 여러 요소를 중앙에 배치하는 접근 방식

개별 요소를 중앙에 배치하는 방법

상위 컨테이너 내에서 하나의 요소를 수직 및 수평 중앙에 배치하려면 다음을 수행하십시오.

1. 캔버스 또는 탐색기에서 상위 컨테이너를 식별합니다.
2. 로 이동 스타일 패널 > 공들여 나열한 것 > 표시하다
3. 누르다 몸을 풀다
4. 선택 센터셀 에서 정렬 상자 (당신은 또한 선택할 수 있습니다 센터 둘 다에서 엑스 그리고 와이중심선 드롭다운)

위 단계를 적용하여 컨테이너 내에 여러 하위 요소가 포함된 개별 요소를 중앙에 배치할 수도 있습니다. 예를 들어 컨테이너를 내부의 제목, 단락 및 링크 블록에 맞춰 정렬할 수 있습니다.

여러 요소를 중앙에 배치하는 방법

Flexbox를 활용하여 컨테이너 내에서 여러 요소를 중앙에 배치할 수 있습니다. 예를 들어 수평 및 수직으로 정렬하고 중앙에 배치해야 하는 두 개의 카드 요소가 있는 경우 이는 유리할 수 있습니다.

1. 캔버스 또는 탐색기에서 상위 컨테이너를 식별합니다.
2. 로 이동 스타일 패널 > 공들여 나열한 것 > 표시하다
3. 누르다 몸을 풀다
4. 세로 '를 클릭하세요.아래쪽 화살표” 아이콘을 사용하여 플렉스 방향을 수직으로 조정합니다.
5. 선택 센터셀 에서 정렬 상자 (당신은 또한 선택할 수 있습니다 센터 둘 다에서 엑스 그리고 와이중심선 드롭다운)

Flexbox에 대해 자세히 알아보세요.