[CSS] Flex

Flex

• 항목을 행이나 열로 배열하는 레이아웃 방법
• float나 position을 사용하지 안혹도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있음

flex의 기본 조건

• flex는 항상 부모 요소(flex container)와 자식 요소(flex items)로 구성됨
• 부모요소에 기본적으로 display: flex가 설정되어야 함

flex의 특징

• flex를 무시하려면 자식요소에 postion:absolute를 활용
• flex container와 flex item에 정의하는 속성으로 나누어 짐
• 자식요소는 행으로 배치된다(축으로 정렬)

---

Flex container

• 모든 요소는 부모 요소에 disply:flex/inline-flex 설정을 기본으로 함
• flex container 속성은 전체적인 정렬이나 흐름에 관련된 속성 설정 : flex-direction, jusify-content, align-item, align-content, flex-wrap

기본 속성

속성	설명
display:flex	- flex container가 block 상태에서 자식들을 flex 방식으로 배치 - flex 방식으로 자식요소들을 배치
display:inline-flex	- flex-container가 inline-block 상태에서 자식들을 flex 방식으로 배치

 

<style>
		.flex-container {
			background-color: #ddd;
			display: flex;
		}

		.flex-container>div {
			background-color: yellow;
		}
	</style>
    <div class="flex-container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>

display:flex인 경우

 

display: inline-flex인 경우

레이아웃 배치 속성

• flex item을 배치하는 속성은 부모 요소의 스타일을 적용

flex-direction

• flex item을 어느 축 기준으로 정렬 방향을 정할 지 지정
• 기본값 => 메인 축 : X 좌표, 교차 축  : Y 좌표

속성값	설명
row (default)	- 왼쪽 부터 차례대로 정렬
column	- 위부터 아래로 정렬
row-reverse	- 오른쪽부터 왼쪽으로 정렬
cloumn-reverse	- 아래부터 위로

justify-content

• 메인 축을 기준으로 flex-item의 배치 정렬 방식 지정
• flex-direction:row/column 에 따라 정렬 기준이 달라짐
• flex-direction:row 상태에서 : x축 방향으로 배치
• flex-direction:cloumn 상태에서 : y축 방향으로 배치

속성값	설명
flex-start	- 메인축 기준 시작 부분 부터 정렬 - flex-direction:row 일 때 : 왼쪽부터  - flex-direction:column 일 때: 위 부터
center	- 요소를 중앙에 배치
flex-end	- 메인 축 기준 끝부분 부터 정렬 - flex-direction:row 일 때 : 오른쪽 부터 - flex-direction:column 일 때: 아래 부터
space-between	- 처음과 끝 item은 양 끝에 여백 x - flex-item들을 동일한 여백으로 배치
space-around	- 처음와 끝 item은 양 여백 1/2을  - item을 동일한 여백으로 배치
space-evenly	- 처음과 끝 요소를 포함하여 모든 요소과 동일한 여백으로 배치

justify-content:space-between

justify-content:space-around

justify-content:space-evenly

---

align-items

• 교차 축(메인 축 반대)을 기준으로 flex-item의 배치 정렬 방식 지정
• flex-direction에 따라 정렬 기준이 달라짐
• flex-direction:row 상태에서 : y축 방향으로 배치
• flex-direction:cloumn 상태에서 : x축 방향으로 배치

속성값	설명
flex-start	- 교차축기준 : 시작 부분부터 정렬 - flex-direction:row 일 때 : y축 위 정렬  - flex-direction:column 일 때: x축 왼쪽
center	- 교차축기준 : 중앙 정렬 - flex-direction:row 일 때 : y축 중앙 정렬 - flex-direction:column 일 때: x축 중앙 정렬
flex-end	- 수직축 기준 : 끝에서 부터 정렬 - flex-direction:row 일 때 : y축 아래 정렬 - flex-direction:column 일 때: x축 오른쪽
stertch (기본값)	- 교차축 방향으로 item을 꽉 채움 - flex-direction:row 일 때 : y축 방향으로 높이를 꽉 채움 - flex-direction:column 일 때: x축 방향으로 너비를 꽉 채움

align-content

• flex item이 flex container를 넘어갈 경우 교차 축(메인 축 반대) 을 기준으로 flex item 요소 그룹의 교차축 배치 방식 지정
• justify-content 속성값과 동일한 속성값 사용 가능

속성값	설명
flex-start	- item 요소 전체위치를 교차축 기준 시작 시점 부터 정렬 - flex-direction:row 일 때 : y축 위 정렬  - flex-direction:column 일 때: x축 왼쪽 정렬
center	- item 요소 전체위치를 교차 축 중앙 정렬 - flex-direction:row 일 때 : y축 중앙 정렬  - flex-direction:column 일 때: x축 중앙 정렬
flex-end	- item 요소 전체위치를 교차 축 기준 시작 끝부터 정렬 - flex-direction:row 일 때 : y축 아래 정렬  - flex-direction:column 일 때: x축 오륵쪽 정렬
space-between
space-around
space-evenly

align-content: flex-start

align-content: center

align-content:flex-end

 

align-content:space-between

align-content:space-around

align-content:space-evenly

flex-wrap

• flex-item 요소가 flex container를 넘어갈 경우 배치 방식 지정
• flex-direction에 따라 정렬 기준이 달라짐

속성	설명
wrap	- 자동으로 줄바꿈
nowrap	- 줄바꿈 하지 않음 - 설정된 flex-item 너비가 무시될 수 있음
wrap-revese	- 줄바꿈 행 별로 역으로 정렬

<style>
	.flex-container {
		background-color: #ddd;
		display: flex;
		flex-direction: row;
		width: 200px;
		flex-wrap: wrap;
		align-items: flex-start
	}

	.flex-container>div {
		background-color: yellow;
		width: 30px;
	}
	</style>

	<div class="flex-container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</div>

flex-wrap:wrap

flex-wrap:no-wrap

flex-wrap:wrap-reverse

gap

• flex item 사이의 공백 크기 지정
• 기본 단위 : em
• 속성값 지정
  • gap:10em -> 가로 세로 10em
  • gpp:10em 20em -> 가로 10em, 세로 20em

<style>
	.flex-container {
		background-color: #ddd;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 200px;
		gap: 10px;
	}

	.flex-container>div {
		background-color: yellow;
		width: 30px;
	}
</style>

<div class="flex-container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>

---

Flex item

• flex container의 자식 요소
• flex item의 속성은 자식 요소의 크기나 순서에 관련된 속성을 정의 : flex-grow, flex-shrink, flex-basis, order

flex-grow

• flex container의 메인 축의 크기가 늘어날 때 빈 공간이 있을 경우 flex-item 크기를 빈 공간만큼 채울지 여부를 지정

속성	설명
1 (default)	- flex-item 각 항목에게 동일하게 크기가 분배
양수	- flex-item이 메인 축 방향으로 flex-basis 값 이상으로 늘어날 수 있음
각 flex item 값을 다르게 지정한 경우	- 동일한 item 요소의  값을 각각 지정한 경우 비율에 따라 공간이 분배됨

	<style>
		.flex-container {
			background-color: #ddd;
			display: flex;
			flex-direction: row;
			gap: 10px;
		}

		.flex-container>div {
			background-color: yellow;
			width: 30px;
			flex-grow: 1;
		}

		.flex-container>div:first-child {
			flex-grow: 2;
		}
   </style>
   <div class="flex-container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>

첫번째 flex-grpw:2, 나머지 flex-grow:1인 경우

flex-shrink

• flex container의 메인축의 크기가 줄어들 때 빈 공간이 있을 경우 flex-item 크기를 줄일 수 있을지 여부를 결정

속성	설명
1 (default)	- 길이가 줄어들 수 있도록 조절
양수	-- flex-item이 메인 축 방향으로 flex-basis 값 이하으로 줄어들 수 있음
각 flex item 값을 다르게 지정한 경우	- 동일한 item 요소의  값을 각각 지정한 경우 비율에 따라 공간이 분배됨 - 값이 더 큰 항목의 사이즈가 더 빨리 줄어듬

첫번째 flex-shrink:2, 나머지 flex-shrink:1인 경우

flex-basis

• flex item의 크기를 지정

속성	설명
auto (default)	- 콘텐츠의 크기를 가짐
flex-basis:1	-

flex 축약형

• 축약형 순서 : flex-grow, flex-shrink, flex-basis 순으로 값을 하나로 지정 가능

축약형	설명
flex:n	- flex: n 1 0 - flex:1, flex:2 처럼 사용 가능한데 flex-grow 값만 설정하고, 나머지는 1 0으로 사용
flex: initial	- flex: 0 1 auto - flex-grow:0 -> flex-basis 보다 커지지않고, - flex-shrink:1 -> flex 컨테이너공간이 모자라면 item 크기가 줄어듬 - flex-basis: auto -> flex 항목은 메인축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지
flex : auto	flex: 1 1 auto - flex:initial과 동일하나, 여유 공간이 있을 때 flex-item의 크기가 여유 공간만큼 채워짐
flex: none	flex: 0 0 auto - flex container 크기가 변해도, flex item의 크기는 변하지 않음

order

• flex item의 순서를 임의로 변경

속성	설명
0 (default)	- 코드 작성 순서대로 나열
order:n	- 순서를 변경하고자 하는 flex-item 속성의 order값을 부여

<style>
	.flex-container {
		background-color: #ddd;
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	.flex-container>div {
		background-color: yellow;
		width: 30px;
	}

	.flex-container>div:first-child {
		order: 3
	}
</style>
<div class="flex-container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

첫번째 아이템에 order:3을 지정

---

• Reference URL

flex example

https://poiemaweb.com/css3-flexbox https://www.w3schools.com/css/css3_flexbox.asp https://developer.mozilla.org/ko/docs/Web/CSS/flex MDN WEB DOCS