티끌모아 태산

Flex 핵심정리 #5 - Flex 속성 활용 본문

코딩/CSS Flex와 Grid 제대로 익히기

Flex 핵심정리 #5 - Flex 속성 활용

yesman9 2024. 10. 15. 16:00

이 게시글은 [CSS Flex와 Grid 제대로 익히기]의 강의를 보며 정리한 내용입니다.

출처: https://www.inflearn.com/course/css-flex-grid-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B5%ED%9E%88%EA%B8%B0/dashboard

 

CSS Flex와 Grid 제대로 익히기 강의 | 1분코딩 - 인프런

1분코딩 | 현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다., 당신이 웹 퍼블리셔, 프론트엔드 개발자, 코딩하는 디자이너라면?이젠 Flex와 Grid를 배워

www.inflearn.com

출처: https://studiomeal.com/archives/197

 

이번에야말로 CSS Flex를 익혀보자

 

studiomeal.com

 

 

Flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

flex-grow (default: 1)
0이 되면 item이 늘어나지 않는다
양수이면 해당 비율만큼 item의 너비가 늘어난다

flex-shrink (default: 1)
0이 되면 item이 basis보다 작아지지 않는다
양수이면 basis보다 작아질 수 있다

flex-basis (flex옵션에서는 default: 0, 단독으로 쓰일 때는 default: auto)
0이되면 item이 늘어나지 않는다 (item의 가로폭이 컨텐츠 크기만큼만 차지, width속성 무시)
양수이면 해당 크기만큼 최소 너비를 갖는다

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
		.flex-container {
			display: flex;
			flex-wrap: wrap;
		}
		.flex-item {
			flex: 1 1 auto;
		}
		.flex-item:nth-child(1) {
			width: 20%;
		}
		.flex-item:nth-child(2) {
			width: 60%;
		}
		.flex-item:nth-child(3) {
			width: 20%;
		}
		.flex-item p {
			/* white-space: nowrap; */
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, nulla eaque officiis eligendi ullam hic temporibus corrupti ducimus sunt! Aut quae rem nobi.</p>
		</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
		<div class="flex-item">DDDDDDDDDDDDD</div>
	</div>
</body>
</html>
저작자표시

'코딩 > CSS Flex와 Grid 제대로 익히기' 카테고리의 다른 글

Flex 핵심정리 #7 - 유용한 기법들  (0) 2024.10.15
Flex 핵심정리 #6 - 반응형 컬럼  (0) 2024.10.15
Flex 핵심정리 #4 - 유연한 박스  (0) 2024.10.15
Flex 핵심정리 #2 - 간단한 예제  (0) 2024.10.15
Flex 핵심정리 #1 - 배치의 흐름  (0) 2024.10.15
'코딩/CSS Flex와 Grid 제대로 익히기' Related Articles more