상자 정렬 시켜보기
<!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> *{ box-sizing: border-box; } div { width: 80px; height: 80px; border:1px solid red; padding: 10px; } .pb { width: 500px; height: 500px; border: 1px solid blue; display: flex; /* 가로 정렬 */ /* flex-direction: row; */ /* 가로 정렬 기본값이 row 여서 입력 안해도 됨 */ flex-direction: column; /* 세로 정렬*/ /* justify-content: center; */ /* 좌우 가운데 정렬*/ /* justify-content: flex-start; */ /* 좌측 정렬, 기본값 */ /* justify-content: flex-end; */ /* 우측 정렬 */ /* justify-content: space-between; */ /* 사이 간격 균등 정렬*/ /* justify-content: space-evenly; */ /* 사이, 양끝 간격 균등 정렬 */ justify-content: space-around; /* 아이템 둘레 균등 정렬 */ align-items: center; /* 위아래 가운데 정렬*/ padding: 50px; /* 부모 박스 내부에 여백을 만들어서 자식 박스들을 더 안쪽으로 넣을 수 있음*/ } </style> </head> <body> <div class="pb"> <!-- 부모 박스--> <!-- 자식 박스 3개--> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
