레이아웃 : flex 속성 [ 구 버전 브라우저 지원X]

  1. display : flex [flex 사용할 요소들의 상위 요소 적용]
  2. flex-direction : 배치 방법
    1. row : 가로 배치[기본 값]
    2. column : 열 배치
    3. row-reverse : 가로 배치 [오른쪽부터]
    4. column-reverse : 열 배치[아래부터]
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "7.css_flex.css" rel = "stylesheet">
		</head>
		<body>
			<h3>플렉스 flex</h3>
			
			<h3>1. 하위 요소 가로 배치 display : flex ; flex-direction: row;</h3>
			<div class="flex_box1"> <!-- 구역 -->
				<div class="box">box1</div>
				<div class="box">box2</div>
				<div class="box">box3</div>
			</div>
			
			<h3>2. 하위 요소 세로 배치 display : flex ; flex-direction: column;</h3>
			<div class="flex_box2"> <!-- 구역 -->
				<div class="box">box1</div>
				<div class="box">box2</div>
				<div class="box">box3</div>
			</div>
			
			<h3>3. 하위 요소 가로 배치 display : flex ; flex-direction: row-reverse;</h3>
			<div class="flex_box3"> <!-- 구역 -->
				<div class="box">box1</div>
				<div class="box">box2</div>
				<div class="box">box3</div>
			</div>
			<h3>4. 하위 요소 세로 배치 display : flex ; flex-direction: column-reverse;</h3>
			<div class="flex_box4"> <!-- 구역 -->
				<div class="box">box1</div>
				<div class="box">box2</div>
				<div class="box">box3</div>
			</div>
		</body>
	</html>

@charset "UTF-8";

.flex_box1{
	border : solid 1px red;
	padding : 5px;
	display : flex; /*가로배치할 요소들의 상위 요소 적용*/
	flex-direction: row; /*row가 기본 값이기 때문에 넣어도 그만 안넣어도 그만*/	
}

.box{
	border : solid 1px blue;
	width : 100px ;
	height : 50px
}

.flex_box2{
	border : solid 1px red;
	padding : 5px;
	display : flex;
	flex-direction: column;
}

.flex_box3{
	border : solid 1px red;
	padding : 5px;
	display : flex; /*가로배치할 요소들의 상위 요소 적용*/
	flex-direction: row-reverse;
}

.flex_box4{
	border : solid 1px red;
	padding : 5px;
	display : flex; /*가로배치할 요소들의 상위 요소 적용*/
	flex-direction: column-reverse;
}

레이아웃 div 순서

  1. 전체 태그를 감싼 div
  2. 헤더 구역, 본문 구역, 푸터 구역
    1. 헤더 : 메인 메뉴, 검색 창, 로고, 로그인 등
    2. 본문 : 대문(대표 이미지), 제품 목록, 정보/내용들 등
    3. 푸터 : 사이트맵, 사이트 정보, 사업자 정보 등
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "8.css레이아웃.css" rel = "stylesheet">
		</head>
		<body>	
			<div id = "web_box">
				<div id = "header"> <!-- 헤더 -->
				</div> 
				<div id = "content"> <!-- 본문 -->
					<div id = "left_menu">왼쪽 메뉴</div> <!-- 왼쪽 본문 -->
					<div id = "right_menu">오른쪽 메뉴</div> <!-- 오른쪽 본문 -->
				</div>
				<div id = "footer"> <!-- 푸터 -->
				</div>
			</div>
		</body>
	</html>

@charset "UTF-8";

/*
	Ctrl + /	단일 주석 및 단일 주석 해제
	Ctrl + Shift + /	블록 주석
	Ctrl + Shift + \\	블록 주석 해제
*/

#web_box{
	/* border: solid 1px red;*/
}

#header{
	/*border : solid 1px blue;*/
	background-color: blue;
	height : 200px;
}

#content{
	/*border: solid 1px orange;*/
	background-color: orange;
	height : 600px;
	width: 1200px; /*PC기준으로 1050px ~ 1300px 씀*/
	margin : 0 auto; /* 가운데 정렬 */
	display: flex; /*가로 배치할 상위 태그에 넣는다! 그래서 메뉴들의 상위 태그안에 넣음*/
}

#content #left_menu{
	/*border: 1px solid grey;*/
	background-color: grey;
	height : 600px;
	width : 900px; /* 부모가 1200씀 -900px - 4px(부모 border와 left_menu의 border)*/
}

#content #right_menu{
	/*border : 1px solid green;*/
	background-color: green;
	height : 600px;
	width: 290px;
}

#footer{
	/*border : 1px solid black;*/
	background-color: black;
	height : 200px;
}

Flex - justify-content 속성

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "9.css_flex2.css" rel = "stylesheet">
		</head>
		<body>
			<h3> flex 정렬 </h3>
			
			<h3> 1. justify-content: flex-start;</h3>
			<div class = "container" id = "flexbox1">
				<div class = box>box1</div>
				<div class = box>box2</div>
				<div class = box>box3</div>
				<div class = box>box4</div>
				<div class = box>box5</div>
				<div class = box>box6</div>
			</div>
				
			<h3> 2. justify-content: flex-end;</h3>
			<div class = "container" id = "flexbox2">
				<div class = box>box1</div>
				<div class = box>box2</div>
				<div class = box>box3</div>
				<div class = box>box4</div>
				<div class = box>box5</div>
				<div class = box>box6</div>
			</div>
			
			<h3> 3. justify-content: center;</h3>
			<div class = "container" id = "flexbox3">
				<div class = box>box1</div>
				<div class = box>box2</div>
				<div class = box>box3</div>
				<div class = box>box4</div>
				<div class = box>box5</div>
				<div class = box>box6</div>
			</div>
			
			<h3> 4. justify-content: space-between;</h3>
			<div class = "container" id = "flexbox4">
				<div class = box>box1</div>
				<div class = box>box2</div>
				<div class = box>box3</div>
				<div class = box>box4</div>
				<div class = box>box5</div>
				<div class = box>box6</div>
			</div>
			
			<h3> 5. justify-content: space-around;</h3>
			<div class = "container" id = "flexbox5">
				<div class = box>box1</div>
				<div class = box>box2</div>
				<div class = box>box3</div>
				<div class = box>box4</div>
				<div class = box>box5</div>
				<div class = box>box6</div>
			</div>
			
			<h3> 5. justify-content: space-evenly;</h3>
			<div class = "container" id = "flexbox6">
				<div class = box>box1</div>
				<div class = box>box2</div>
				<div class = box>box3</div>
				<div class = box>box4</div>
				<div class = box>box5</div>
				<div class = box>box6</div>
			</div>
			
		</body>
	</html>

@charset "UTF-8";

.container{
	display : flex /* 상위에 이 코드를 넣으면 안에 있는 하위 태그들이 가로 배치*/
}

.box{
	width : 10% ;
	height : 50%;
	background-color: #ff8080;
	color : white;
	border: solid 1px #730014;
}

#flexbox1{
	justify-content: flex-start; /*왼쪽정렬*/
}

#flexbox2{
	justify-content: flex-end; /*오른쪽 정렬*/
}

#flexbox3{
	justify-content: center; /*가운데 정렬*/
}

#flexbox4{
	/*사이 공백 추가해서 정렬-> 첫번째 요소와 마지막 요소가 양쪽에 붙음(균등배치)*/
	justify-content: space-between; 
}

#flexbox5{
	/*여백 간격이 동일하게 들어감 -> between과 달리 왼쪽 공백 존재*/
	justify-content: space-around; 
}

#flexbox6{
	/**/
	justify-content: space-evenly; 
}

Untitled