-
플렉스 박스 레이아웃CSS 2023. 6. 22. 15:02
플렉스 박스 레이아웃과 기본 속성들
플렉스 박스 레이아웃
그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것
여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음
display 속성
-배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정
예제) 플렉스 display ( 주축 방향으로 옆으로 붙는다)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ width: 500px; height: 300px; margin: 0 auto; border: 2px solid black; /* 주축 방향으로 옆으로 붙는다 */ display: flex; } #container div{ width: 200px; border: 2px solid black; background: #ccc; } h2{ font-size: 20px; font-weight: bold; padding: 20px; } </style> </head> <body> <div id="container"> <div id="box1"> <h2>1</h2> </div> <div id="box2"> <h2>2</h2> </div> <div id="box3"> <h2>3</h2> </div> </div> </body> </html>flex-direction 속성
플렉스 항목 배치 방향 지정
예제) flex-direction (주축방향으로 배치 방향 지정)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ width: 500px; height: 300px; margin: 0 auto; border: 2px solid black; /* 주축 방향으로 옆으로 붙는다 */ display: flex; /* row : 기본값 */ /* flex-direction: row; */ /* column : 기본 방향이 바뀜 */ flex-direction: column; } #container div{ width: 200px; border: 2px solid black; background: #ccc; } h2{ font-size: 20px; font-weight: bold; padding: 20px; } </style> </head> <body> <div id="container"> <div id="box1"> <h2>1</h2> </div> <div id="box2"> <h2>2</h2> </div> <div id="box3"> <h2>3</h2> </div> </div> </body> </html>flex-wrap 속성
플렉스 항목을 한 줄 또는 여러 줄로 배치
예제) flex-wrap (주축방향으로 양쪽에 배치)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ width: 500px; height: 300px; margin: 0 auto; border: 2px solid black; /* 주축 방향으로 옆으로 붙는다 */ display: flex; /* row : 기본값 */ /* flex-direction: row; */ /* column : 기본 방향이 바뀜 */ /* flex-direction: column; */ /* nowrap : 기본값 */ /* flex-wrap: nowrap; */ /* wrap : 여러줄로 표시 */ flex-wrap: wrap; } #container div{ width: 200px; border: 2px solid black; background: #ccc; } h2{ font-size: 20px; font-weight: bold; padding: 20px; } </style> </head> <body> <div id="container"> <div id="box1"> <h2>1</h2> </div> <div id="box2"> <h2>2</h2> </div> <div id="box3"> <h2>3</h2> </div> </div> </body> </html>flex-flow 속성
플렉스 배치 방향과 여러 줄 배치를 한꺼번에 지정
order 속성
플렉스 항목의 배치 순서 바꾸기
예제) flex-order (box 배치 순서 지정해서 정하기)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ width: 500px; height: 300px; margin: 0 auto; border: 2px solid black; /* 주축 방향으로 옆으로 붙는다 */ display: flex; } #container div{ width: 200px; border: 2px solid black; background: #ccc; } h2{ font-size: 20px; font-weight: bold; padding: 20px; } #box1{ order: 2; } #box2{ order: 3; } #box3{ order: 1; } </style> </head> <body> <div id="container"> <div id="box1"> <h2>box1</h2> </div> <div id="box2"> <h2>box2</h2> </div> <div id="box3"> <h2>box3</h2> </div> </div> </body> </html>플렉스 항목 배치를 위한 속성들
justidy-content 속성
플렉스 항목을 주축 방향으로 배치할 때의 배치 기준
align-items 속성, align-self 속성
교차축을 기준으로 하는 배치 방법 조정
예제) 플렉스 align-self, align-items (1상자 스타트 지점 배치, 2,3상자 센터에 배치 )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ width: 500px; height: 300px; margin: 0 auto; border: 2px solid black; /* 주축 방향으로 옆으로 붙는다 */ display: flex; /* 수직 가운데 정렬 */ align-items: center; } #container div{ width: 200px; border: 2px solid black; background: #ccc; } h2{ font-size: 20px; font-weight: bold; padding: 20px; } #box1{ /* 시작위치로 정렬 */ align-self: flex-start; } </style> </head> <body> <div id="container"> <div id="box1"> <h2>box1</h2> </div> <div id="box2"> <h2>box2</h2> </div> <div id="box3"> <h2>box3</h2> </div> </div> </body> </html>'CSS' 카테고리의 다른 글
쇼핑몰 웹 페이지 만들기 (0) 2023.06.22 미디워 쿼리 (0) 2023.06.22 반응형 웹이란 (0) 2023.06.22 트랜지션과 애니메이션 (0) 2023.06.22 CSS3와 애니메이션 (0) 2023.06.22