티끌모아 태산

Flex 핵심정리 #2 - 간단한 예제 본문

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

Flex 핵심정리 #2 - 간단한 예제

yesman9 2024. 10. 15. 13:22

이 게시글은 [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와 Grid 개발시에는 Firefox 브라우저를 쓰면 좋다. 특히 그리드.

개발자 도구에 플렉스 컨테이너 및 그리드 항목이 있기 때문.

 

아주 간단한 반응형 웹 css 예제

<!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-direction: column;
		}
		 /* 600px 이상일 때 (데스크톱 화면) */
		@media (min-width: 600px) {
			.flex-container {
				flex-direction: row;
			}
			.flex-item {
				/* 가로 끝까지 늘림 */
				flex: 1;
			}
		}		
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">AAAAAAAAAAAA</div>
		<div class="flex-item">BBB</div>
		<div class="flex-item">CCCCCCCCCC</div>
	</div>
</body>
</html>

 

600px 이상일 때
600px 이하일 때

 

저작자표시 (새창열림)

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

Flex 핵심정리 #6 - 반응형 컬럼  (0) 2024.10.15
Flex 핵심정리 #5 - Flex 속성 활용  (0) 2024.10.15
Flex 핵심정리 #4 - 유연한 박스  (0) 2024.10.15
Flex 핵심정리 #1 - 배치의 흐름  (0) 2024.10.15
Flex 시작하기  (0) 2024.10.15
'코딩/CSS Flex와 Grid 제대로 익히기' Related Articles more