Chapter 1-5. Flex 핵심정리 - 유연한 박스

Date: 2023.07.04 Updated: 2023.07.04

카테고리: Css

인프런에 있는 1%코딩님의 강의 CSS Flex와 Grid 제대로 익히기 를 듣고 정리한 필기입니다. 😀

👱유연한 박스의 기본 영역 - flex-basis

지금부터는 Flex 아이템에 적용하는 속성들에대해서 알아보겠습니다. 먼저 flex-basis는 Flex 아이템의 기본 크기를 설정합니다. 아래 예제에서는 아이템의 기본크기를 100px로 설정했습니다. 만약에 아이템크기가 100px보다 작으면 아이템 크기가 100px로 설정되고, 100px보다 크면 100px 설정은 무시가 됩니다.

flex-direction이 row일 때는 너비, column일 때는 높이 임을 기억해두세요.

.item {
  flex-basis: 100px;
}

flex-basis의 기본값은 auto인데 auto로 설정되어 있는 경우, width의 값을 가져와서 설정됩니다. 즉
```
.flex-item{
width: 50%
flex-basis: auto /* flex-basis: 50%와 같은 의미입니다.*/
}
```

👱유연하게 늘기기 - flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지 결정하는 속성입니다. flex-grow는 기본값이 0으로 따로 적용하기 전까지는 아이템이 늘어나지 않습니다. 여기에 0 보다 큰 값이 설정되면 해당 아이템이 유연한(Flexible) 박스로 변하고, 원래의 크기보다 커지며 빈 공간을 메우게 됩니다.

.item {  
  flex-grow: 1;
  flex-grow: 0; /* 기본값 */
}

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하시면 됩니다. 숫자는 정수뿐만 아니라 실수도 입력 가능합니다.

.item:nth-child(1) {flex-grow: 1;}
.item:nth-child(2) {flex-grow: 2;}
.item:nth-child(1) {flex-grow: 1;}

👱유연하게 줄이기 - flex-shrink

flex-shrink는 아이템이 flex-basis의 값보다 작아질 수 있는지 결정하는 속성입니다. flex-shrink에는 숫자값이 들어가는데, 0보다 큰 값이 세팅되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아집니다. 기본값이 1이기때문에 따로 세팅하지 않았어도 flex-basis보다 작아질 수 있었습니다.

.item{
  flex-basis: 150px;
  flex-shrink: 1; /* 기본값 */
}

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있습니다. 고정 크기는 width로 설정합니다.

.container{
  display: flex;
}

.item:nth-child(1){  
  flex-shrink: 0;
  width: 100px;
}

.item:nth-child(2){
  flex-grow: 1;
}

grow, shrink, basics를 축약해서 쓰자 - flex

보통 이 3속성(flex-grow, flex-shrink, flex-basis)은 단독으로 쓰지 않고 같이 쓰는 경우가 대부분입니다. 이떄, 한 번에 쓸수 있는 속성이 flex입니다. flex를 적고 grow shrink 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: 0;
  /* flex-grow: 0; flex-shrink: 1; flex-basis: 0% */
}

반응형 칼럼 만들기

flex를 이용하여 창의 크기에 따라 1단, 2단, 3단 칼럼으로 보이게 하는 예제입니다.

<!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>
    /* 1 */
		.flex-container {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			/* border: 10px solid red; */
		}
    /* 2 */
		.flex-item {
			flex: 1 auto;
		}
    /* 3 */
		@media (min-width: 600px) {
			.flex-container {
				flex-direction: row;
				flex-wrap: wrap;
			}
			.flex-item {
				width: 50%;
				/* flex-grow: 0; */
				/* flex: 0 auto; */
				/* flex-basis: 50%; */
			}
		}
    /* 4 */
		@media (min-width: 900px) {
			.flex-item {
				width: 30%;
			}
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">AAAAAAAAAA</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
		<div class="flex-item">AAAAAAAAAA</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
		<div class="flex-item">AAAAAAAAAA</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
	</div>
</body>
</html>

1번 블록이 의미하는것은 아래와 같습니다.
- .flex-container : 이 부분은 클래스 선택자로, flex 컨테이너에 해당하는 요소를 선택합니다. 이 클래스를 HTML의 원하는 요소에 적용해야 합니다.
- display: flex; : 이 속성은 flex 컨테이너를 생성하기 위해 사용됩니다. 이를 통해 flex 아이템들을 가로 또는 세로로 배치할 수 있게 됩니다.
- flex-direction: column; : 이 속성은 flex 아이템들이 세로로 배치되도록 지정합니다. 즉, 아이템들이 위에서 아래로 아래로 쌓이게 됩니다. 만약 가로로 배치하고 싶다면 row로 설정하면 됩니다.
- min-height: 100vh; : 이 속성은 flex 컨테이너의 최소 높이를 화면의 세로 뷰포트 높이(vh)의 100%로 설정합니다. 따라서 컨테이너는 항상 화면 전체 높이를 차지하게 됩니다.
- 주석 처리된 /* border: 10px solid red; */ 부분: 이 부분은 flex 컨테이너 주위에 빨간색 테두리(border)를 생성하는 속성입니다. 필요에 따라 주석을 해제하여 사용할 수 있습니다.
2번 블록이 의미하는것은 아래와 같습니다.
- .flex-item : 이 부분은 클래스 선택자로, flex 아이템에 해당하는 요소를 선택합니다. 이 클래스를 HTML의 원하는 요소에 적용해야 합니다.
- flex: 1 auto; : 이 속성은 flex 아이템에 대한 유연한 크기 조절을 설정합니다. 이 설정은 flex 컨테이너 내에서 flex 아이템들의 크기를 조절하는 데 사용됩니다.
  - 1은 flex-grow의 값으로, 아이템이 컨테이너 내에서 차지하는 공간의 비율을 나타냅니다. 여기서 1은 아이템이 컨테이너의 남은 공간을 모두 차지하도록 함을 의미합니다. 다른 아이템들에 비해 동일한 비율로 늘어나게 됩니다.
  - auto는 flex-shrink와 flex-basis의 값을 설정합니다. auto로 설정하면 아이템의 기본 크기를 유지합니다. 즉, 아이템의 크기가 자동으로 줄어들지 않습니다.
3번 블록이 의미하는것은 아래와 같습니다.
- @media (min-width: 600px) : 이 부분은 미디어 쿼리를 정의하는 부분으로, 화면 너비가 600px 이상일 때 아래의 스타일이 적용됩니다. 즉, 이 스타일은 반응형 디자인을 위해 더 큰 화면에 대한 설정을 제공합니다.
- .flex-container : 이 부분은 .flex-container 클래스에 적용되는 스타일을 정의합니다. 미디어 쿼리가 화면 너비가 600px 이상인 경우에 적용되므로, flex 컨테이너의 flex-direction 속성이 row로 변경됩니다. 이는 아이템들을 가로로 배치하도록 합니다. 또한, flex-wrap 속성을 wrap으로 설정하여 아이템들이 한 줄에 모두 표시되지 않고 여러 줄로 나뉘어 표시되도록 합니다.
- .flex-item : 이 부분은 .flex-item 클래스에 적용되는 스타일을 정의합니다. 미디어 쿼리가 화면 너비가 600px 이상인 경우에 적용되므로, 아이템의 너비를 width: 50%;로 설정하여 아이템들이 가로로 반 씩 차지하도록 합니다.
4번 블록이 의미하는것은 아래와 같습니다.
- @media (min-width: 900px) : 이 부분은 미디어 쿼리를 정의하는 부분으로, 화면 너비가 900px 이상일 때 아래의 스타일이 적용됩니다. 즉, 이 스타일은 반응형 디자인을 위해 더 큰 화면에 대한 설정을 제공합니다.
- .flex-item : 이 부분은 .flex-item 클래스에 적용되는 스타일을 정의합니다. 미디어 쿼리가 화면 너비가 900px 이상인 경우에 적용되므로, 아이템의 너비를 width: 30%;로 설정하여 아이템들이 가로로 30%의 공간을 차지하도록 합니다. 이는 아이템들이 더 넓은 화면에서 좁아지지 않고 더 많은 아이템이 한 줄에 표시되도록 합니다.

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

쿠루가이

Chapter 1-5. Flex 핵심정리 - 유연한 박스

👱유연한 박스의 기본 영역 - flex-basis

👱유연하게 늘기기 - flex-grow

👱유연하게 줄이기 - flex-shrink

grow, shrink, basics를 축약해서 쓰자 - flex

반응형 칼럼 만들기

Css 카테고리 내 다른 글 보러가기

댓글 남기기

최근 글 10 개 :)