IT정보/CSS_CSS3

[CSS3] css3 레이아웃 잡기(display:box)

천재소년s 2014. 1. 29. 15:03
반응형




display: box;

A
B
.displayBox div {
	display: -webkit-box; 
	height:200px; 
	border: 5px solid black;
}
.displayBox #a {width: 30%; background-color: yellow;}
.displayBox #b {width: 70%; background-color: skyblue;}


	
display: box;

	

		
A

		
B



box-orient

엘리먼트들이 배치되는 방향을 결정.

A
B
box-orient


엘리먼트들이 배치되는 방향을 결정.



	
A

	
B




.box-orient {
	display: -webkit-box;
	-webkit-box-orient: horizontal;
/* 	-webkit-box-orient: vertical; */
	height: 200px;
	border: 5px solid black;
}
.box-orient #a {background-color: yellow;}
.box-orient #b {background-color: skyblue;}



box-direction

엘리먼트들이 배치되는 순서를 결정.

A
B
C
box-direction


엘리먼트들이 배치되는 순서를 결정.



	
A

	
B

	
C




.box-direction {
	display: -webkit-box;
	-webkit-box-orient: vertical;
/*	-webkit-box-direction: normal;*/
 	-webkit-box-direction: reverse; 
	height: 200px;
	border: 5px solid black;
}
.box-direction #a {background-color: yellow;}
.box-direction #b {background-color: skyblue;}
.box-direction #c {background-color: pink;}



box-align

box-orient에서 정해준 방향과 수직이 되는 축을 기준으로 정렬.

A
B
C
box-align


box-orient에서 정해준 방향과 수직이 되는 축을 기준으로 정렬.



	
A

	
B

	
C




.box-align {
	display: -webkit-box;
/*	-webkit-box-orient: horizontal;*/
 	-webkit-box-orient: vertical; 
	-webkit-box-align: center; 
/* 	-webkit-box-align: stretch; */
/* 	-webkit-box-align: start; */
/* 	-webkit-box-align: end; */
	height: 200px;
	border: 5px solid black;
}
#a {background-color: yellow;}
#b {background-color: skyblue;}
#c {background-color: pink;}



box-pack

box-orient에서 정해준 방향과 일치하는 축을 기준으로 정렬.

A
B
C
box-pack


box-orient에서 정해준 방향과 일치하는 축을 기준으로 정렬.



	
A

	
B

	
C




.box-pack {
	display: -webkit-box;
/* 	-webkit-box-orient: horizontal; */
/* 	-webkit-box-orient: vertical; */
/* 	-webkit-box-align: stretch; */
/* 	-webkit-box-align: start; */
 	-webkit-box-align: center; 
/* 	-webkit-box-align: end; */
/*	-webkit-box-pack: start; */
 	-webkit-box-pack: center; 
/* 	-webkit-box-pack: end; */
/* 	-webkit-box-pack: justify; */
	height: 200px;
	border: 5px solid black;
}
.box-pack #a {background-color: yellow;}
.box-pack #b {background-color: skyblue;}
.box-pack #c {background-color: pink;}



box-ordinal-group

엘리먼트가 배치되는 순서를 숫자를 이용해 구체적으로 지정.

A
B
C
box-ordinal-group


엘리먼트가 배치되는 순서를 숫자를 이용해 구체적으로 지정.



	
A

	
B

	
C




.box-ordinal-group {
	display: -webkit-box;
	height: 200px;
	border: 5px solid black;
}
.box-ordinal-group #a {-webkit-box-ordinal-group: 3; background-color: yellow;}
.box-ordinal-group #b {-webkit-box-ordinal-group: 2; background-color: skyblue;}
.box-ordinal-group #c {-webkit-box-ordinal-group: 1; background-color: pink;}



box-flex

엘리먼트에 레이아웃에 따라 유동적(flexible)으로 움직이는 특성을 부여.
각 엘리먼트가 원래 차지하는 너비를 제외한 나머지 영역을 숫자 비율대로 배분한다.

AAA
BBB
CCC
box-flex



	엘리먼트에 레이아웃에 따라 유동적(flexible)으로 움직이는 특성을 부여.
	각 엘리먼트가 원래 차지하는 너비를 제외한 나머지 영역을 숫자 비율대로 배분한다.




	
AAA

	
BBB

	
CCC




.box-flex {
	display: -webkit-box;
	height: 200px;
	border: 5px solid black;
}
.box-flex #a {-webkit-box-flex: 1; background-color: yellow;}
.box-flex #b {-webkit-box-flex: 2; background-color: skyblue;}
.box-flex #c {-webkit-box-flex: 1; background-color: pink;}



Logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac hendrerit lectus. Suspendisse et faucibus dui. Mauris euismod eros at nibh feugiat pharetra. Morbi sit amet eros felis. Sed libero justo, mattis vitae ultricies quis, porttitor nec orci. Quisque vel felis vel lectus faucibus luctus sit amet a urna. Cras sem mi, aliquam a tincidunt a, ornare quis sem. Nullam mi nulla, eleifend nec commodo vel, condimentum id odio. Maecenas vitae augue malesuada metus gravida pretium. Aliquam adipiscing, elit sit amet interdum convallis, erat enim placerat diam, interdum egestas lacus neque tristique eros.

In luctus, urna id rutrum dapibus, ipsum mauris hendrerit leo, quis semper mi dolor vitae neque. Integer egestas leo arcu, sed malesuada ipsum. Nam vitae enim vel lectus placerat volutpat id ut quam. Phasellus fringilla pellentesque tortor eget iaculis. Donec faucibus fringilla quam et bibendum. Nulla eleifend neque at augue tincidunt vestibulum. Ut sed odio eu felis interdum cursus. Nam sit amet vulputate libero. Maecenas eget metus at turpis commodo vestibulum. Pellentesque nec odio dolor. Proin in pretium nisi. Etiam blandit justo quis lacus rutrum tincidunt. Vivamus ac cursus arcu. Cras gravida orci eget arcu tempor dignissim. Donec arcu diam, pulvinar elementum iaculis in, bibendum non libero. Morbi vitae elit erat.


	

		

			
Logo

			
		

		
		

			

				
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac hendrerit lectus. Suspendisse et faucibus dui. Mauris euismod eros at nibh feugiat pharetra. Morbi sit amet eros felis. Sed libero justo, mattis vitae ultricies quis, porttitor nec orci. Quisque vel felis vel lectus faucibus luctus sit amet a urna. Cras sem mi, aliquam a tincidunt a, ornare quis sem. Nullam mi nulla, eleifend nec commodo vel, condimentum id odio. Maecenas vitae augue malesuada metus gravida pretium. Aliquam adipiscing, elit sit amet interdum convallis, erat enim placerat diam, interdum egestas lacus neque tristique eros.

				
In luctus, urna id rutrum dapibus, ipsum mauris hendrerit leo, quis semper mi dolor vitae neque. Integer egestas leo arcu, sed malesuada ipsum. Nam vitae enim vel lectus placerat volutpat id ut quam. Phasellus fringilla pellentesque tortor eget iaculis. Donec faucibus fringilla quam et bibendum. Nulla eleifend neque at augue tincidunt vestibulum. Ut sed odio eu felis interdum cursus. Nam sit amet vulputate libero. Maecenas eget metus at turpis commodo vestibulum. Pellentesque nec odio dolor. Proin in pretium nisi. Etiam blandit justo quis lacus rutrum tincidunt. Vivamus ac cursus arcu. Cras gravida orci eget arcu tempor dignissim. Donec arcu diam, pulvinar elementum iaculis in, bibendum non libero. Morbi vitae elit erat.

			

		

		

			
			
			
		

	




.body * {margin: 0; padding: 0;}
.body {
	display: -webkit-box;
	-webkit-box-pack: center;
	background-color: #ddd;
}
.body #page-container {
	padding: 0 0 20px;
	border: 1px solid #ccc;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
}
.body #page-container > * {padding: 0 20px;}
.body header.global {
	display: -webkit-box;
	-webkit-box-align: center;
	height: 100px;
}
.body #logo {-webkit-box-flex: 1;}
.body nav.global > ul {display: -webkit-box;}
.body nav.global > ul > li {
	-webkit-box-flex: 1;
	min-width: 100px;
	list-style: none;
	border: 1px solid #000;
	background-color: #666;
	-webkit-transition: width 0.3s ease;
}
.body nav.global > ul > li:hover {width: 20%;}
.body nav.global > ul > li > a {
	display: block;
	padding: 10px 0;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.body article {padding: 20px 0;}
.body .secondary {
	display: -webkit-box;
	-webkit-box-pack: justify;
}
.body .secondary aside {
	width: 30%;
	padding: 10px;
	border: 1px solid #aaa;
	background-color: #eee;
}



반응형
저작자표시 (새창열림)