[CSS] 9. Flexitem의 세밀한 제어 flex 속성

2024년 07월 04일

Song hyun
작성자
2024.07.04.:50

728x90

[CSS] 9. Flexitem의 세밀한 제어 flex 속성

2. Flex 아이템 속성 사용 목적

(1) order:

(2) flex-grow:

(3) flex-shrink:

(4) flex-basis:

(5) flex(단축 속성): flex-grow,flex-shrink,flex-basis 를 한 번에 설정하여 코드 간결화와 효율성을 높이기 위해 사용한다.

*단축 속성

(ex: padding: 10px 20px 30px 40px -> 좌10 상20 우30 하40

padding: 10px 20px -> 상하10px 좌우20px)

3. 시나리오 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.container{
		display: flex;
		flex-wrap:wrap;
		border: 2px solid #333;
		padding: 10px;
		background-color: #f9f9f9;
	}
	
	.order-1{
		order: 1;
	}
	.order-2{
		order: 2;
	}
	.order-3{
		order: 3;
	}
	
</style>
</head>
<body>
<%--
	JSP=Java+HTML
	http://localhost:8080/flex/index.jsp
	http://localhost:8080/flex
 --%>
	<h2>order 속성</h2> 
 	<div class="container">
 		<div class="item order-2">아이템 1</div>
 		<div class="item order-1">아이템 2</div>
 		<div class="item order-3">아이템 3</div>
 		<div class="item order-4">아이템 4</div>
 	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.container{
		display: flex;
		flex-wrap:wrap;
		border: 2px solid #333;
		background-color: #f9f9f9;
		padding: 10px;
	}
	.item{
		width: calc(33.333%-10px);
		background-color: brown;
		color: white;
		margin: 5px;
		padding: 10px;
		text-align: center;
		border-radius:5px;
	}
	.order-1{
		order: 1;
	}
	.order-2{
		order: 2;
	}
	/*지정하지 않으면 더 우선순위를 가진다.*/
	.order-3{
		order: 3;
	}
	/*flex-grow 속성은 특정 아이템이 더 많은 공간을 차지해야 할 때 사용한다.*/
	/*flex-grow: 욕심쟁이~*/
	.grow-1{
		flex-grow:1;
	}
	/*flex-shrink 속성은 공간이 부족할 때, 얼마나 줄어들지를 결정한다.
		특정 아이템이 줄어들면서, 다른 아이템과 균형을 맞추어야 할 때 활용한다.*/
	.shrink-1{
		flex-shrink:1;
	}
</style>
</head>
<body>
<%--
	JSP=Java+HTML
	http://localhost:8080/flex/index.jsp
	http://localhost:8080/flex
 --%>
	<h2>order 속성</h2> 
 	<div class="container">
 		<div class="item order-2">아이템 1</div>
 		<div class="item order-1">아이템 2</div>
 		<div class="item order-3">아이템 3</div>
 	</div>
 	
 	<h2>flex-grow 속성</h2> 
 	<div class="container">
 		<div class="item grow-1">아이템 1</div>
 		<div class="item">아이템 2</div>
 		<div class="item">아이템 3</div>
 	</div>
 	
 	<h2>flex-shrink 속성</h2> 
 	<div class="container" style="width: 550px;">
 		<div class="item shrink-1">아이템 1( flex-shrink : 1 )</div>
 		<div class="item">아이템 2( flex-shrink : 0 )</div>
 		<div class="item">아이템 3( flex-shrink : 0 )</div>
 	</div>
 	
 	<h2>flex-basis 속성</h2> 
 	<div class="container">
 		<div class="item basis-100">아이템 1( flex-basis : 100px )</div>
 		<div class="item">아이템 2</div>
 		<div class="item">아이템 3</div>
 	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.container{
		display: flex;
		flex-wrap:wrap;
		border: 2px solid #333;
		background-color: #f9f9f9;
		padding: 10px;
	}
	.item{
		/*width: calc(33.333%-10px);*/
		background-color: brown;
		color: white;
		margin: 5px;
		padding: 10px;
		text-align: center;
		border-radius:5px;
	}
	.order-1{
		order: 1;
	}
	.order-2{
		order: 2;
	}
	/*지정하지 않으면 더 우선순위를 가진다.*/
	.order-3{
		order: 3;
	}
	/*flex-grow 속성은 특정 아이템이 더 많은 공간을 차지해야 할 때 사용한다.*/
	/*flex-grow: 욕심쟁이~*/
	.grow-1{
		flex-grow:1;
	}
	/*flex-shrink 속성은 공간이 부족할 때, 얼마나 줄어들지를 결정한다.
		특정 아이템이 줄어들면서, 다른 아이템과 균형을 맞추어야 할 때 활용한다.*/
	.shrink-1{
		flex-shrink:1;
	}
	.basis-100{
		flex-grow: 1;
		flex-basis:300px;
	}
	/* flex(단축 속성) - flex-grow, flex-shrink, flex-basis를 한번에 설정하는 속성이다. */
	.flex-combined{
		flex: 1 1 300px;		
	}
</style>
</head>
<body>
<%--
	JSP=Java+HTML
	http://localhost:8080/flex/index.jsp
	http://localhost:8080/flex
 --%>
	<h2>order 속성</h2> 
 	<div class="container">
 		<div class="item order-2">아이템 1</div>
 		<div class="item order-1">아이템 2</div>
 		<div class="item order-3">아이템 3</div>
 	</div>
 	
 	<h2>flex-grow 속성</h2> 
 	<div class="container">
 		<div class="item grow-1">아이템 1</div>
 		<div class="item">아이템 2</div>
 		<div class="item">아이템 3</div>
 	</div>
 	
 	<h2>flex-shrink 속성</h2> 
 	<div class="container" style="width: 550px;">
 		<div class="item shrink-1">아이템 1( flex-shrink : 1 )</div>
 		<div class="item">아이템 2( flex-shrink : 0 )</div>
 		<div class="item">아이템 3( flex-shrink : 0 )</div>
 	</div>
 	
 	<h2>flex-basis 속성</h2> 
 	<div class="container">
 		<div class="item basis-100">아이템 1( flex-basis : 100px )</div>
 		<div class="item">아이템 2</div>
 		<div class="item">아이템 3</div>
 	</div>
 	
 	<h2>flex 단축 속성</h2> 
 	<div class="container">
 		<div class="item flex-combined">아이템 1</div>
 		<div class="item flex-combined">아이템 2</div>
 		<div class="item flex-combined">아이템 3</div>
 	</div>
</body>
</html>

728x90

'HTML,CSS, JS > CSS' 카테고리의 다른 글

[CSS] 11. Flexbox로 메인 페이지 만들기 (0)	2024.07.08
[CSS] 10. 시험 (0)	2024.07.04
[CSS] 시험 (0)	2024.07.02
[CSS] 8. 교차축 정렬 (0)	2024.07.02
[CSS] 7. 주축 방향 정렬 Justify-content (0)	2024.07.02

다음 글이 없습니다.

이전 글이 없습니다.

[CSS] 9. Flexitem의 세밀한 제어 flex 속성

'HTML,CSS, JS > CSS' 카테고리의 다른 글

티스토리툴바