FlexItem의 세밀한 제어 flex 속성

CSS

by 미로910 2024. 7. 4. 16:43

Flex 아이템의 속성을 이해하고 사용할 수 있다.
Flexbox 레이아웃에서 각 아이템의 순서, 크기 및 정렬을 제어할 수 있다.
order, flex-grow, flex-shrink, flex-basis, flex, align-self 속성의 사용 목적과 상황을 파악할 수 있다.

Flex 아이템 속성 사용 목적

order: 아이템의 표시 순서를 제어하여 중요도에 따라 배치 순서를 변경하기 위해 사용한다. 즉, 중요도에 따라 순서를 변경하거나 특정 아이템을 맨 앞이나 맨 뒤에 배치할 때 사용할 수 있다.
flex-grow: Flex 컨테이너 내의 남은 공간을 아이템들이 비율에 맞게 차지하도록 하기 위해 사용한다. 또는 여러 아이템이 있고, 특정 아이템이 더 많은 공간을 차지해야 할 때 사용할 수도 있다.
flex-shrink: 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정하여 반응형 디자인에서 레이아웃을 유지하기 위해 사용한다.
flex-basis: 아이템의 기본 크기를 설정하여 초기 크기를 지정하고 나머지 공간을 flex-grow와 flex-shrink로 조정하기 위해 사용한다. 즉, 아이템의 초기 크기를 설정하고, 나머지 공간을 flex-grow와 flex-shrink로 조정하고 싶을 때.
flex (단축 속성): flex-grow, flex-shrink, flex-basis를 한 번에 설정하여 코드 간결화와 효율성을 높이기 위해 사용한다.

.item {
    flex: 1 1 200px;
}

<%@ 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;
	}
	
	.item {
		 /*width: calc(33.333% - 10px); */
		background-color:  brown;
		color: white;
		margin: 5px;
		padding: 20px;
		text-align: center;
		border-radius: 5px;
	}
	
	.order-1 {
		order: 1;
	}
	
	.order-2 {
		order: 2;
	}
	
	/* 지정하지 않으면 더 우선 순위를 가진다 */
	.order-3 {
		order: 3;
	}
	/* flex-grow 속성은 특정 아이템 더 많은 공간을 차지해야 할 때 사용 */
	.grow-1 {
		flex-grow: 1;
		
	}
	
	/* flex-shrink 속성은 (공간이 부족할 때 얼마나 줄어들지를 결정)
		특정 아이템이 줄어들면서 다른 아이템과 균형을 맞추어야 할 때 활용한다.
	 */
	.shrink-1 {
		flex-shrink: 1;
		
	}
	
	.basis-100 {
		flex-basis: 300px;
		
	}
	
	/* flex(단축 속성) - flex-grow, flex-shrink, flex-basis를 한번에 설정하는 속성이다*/
	.foex-combined {
		flex: 1 1 300px;
	} 
</style>
</head>
<body>
	<%-- 
		http://localhost:8080/flex/index.jsp
		http://localhost:8080/flex
		width: calc(33.333% - 10px);
	 --%>
	<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(fles-shrink : 1)</div>
		<div class="item ">아이템2(fles-shrink : 0)</div>
		<div class="item ">아이템3(fles-shrink : 0)</div>
	</div>
	
	<h2>flex-basis 속성</h2>
	<div class="container">
		<div class="item basis-100">아이템1(fles-basis: 100px)</div>
		<div class="item ">아이템2</div>
		<div class="item ">아이템3</div>
	</div>
	
	<h2>flex 단축 속성</h2>
	<div class="container">
		<div class="item foex-combined">아이템1</div>
		<div class="item foex-combined">아이템2</div>
		<div class="item foex-combined">아이템3</div>
	</div>
</body>
</html>

'CSS' 카테고리의 다른 글

웹페이지 레이아웃 구성해 보기 (0)	2024.07.08
Flexbox - 연습 문제 (0)	2024.07.04
교차축 정렬에는 align-items와 align-content 이다. (0)	2024.07.04
주축 방향 정렬 justify-content 란? (0)	2024.07.04
flex-wrap 이해하기 (0)	2024.07.04