flex 레이아웃

🧐 지금까지 만든 HTML 요소를 자유롭게 배치하려면 어떻게 해야할까?

Q. 기존에 DIV 요소는 줄바꿈이 되어 수직으로 배치가 된다. 그렇다면 이를 수평적으로 배치하거나 자식을 부모 기준으로 가운데 정렬을 하려면 어떻게 해야할까??

 

=>  A. 옛날에는 float와 display 속성 (table, inline-box) 등을 사용했으나, 요새는 flex를 통해 배치한다!

 

1. Flex 기본

flex는 container와 items로 나뉜다.

Container : items를 감싸는 부모 요소로, item을 정렬하려면 container는 필수다!

 

조심할 점은 container와 items에 적용하는 속성이 구분되어 있다는 것이다.

 

container : display, flex-flow, justify-content

items : order, flex, align-self

 

2. 컨테이너 속성 (부모 속성)

- flex-direction : 자식의 정렬 방향 설정하기

- row는 수평으로, column은 수직으로 정렬한다

.parent {
	display: flex;
	flex-direciton: column; 
}

 

- justify-content : 아이템 정렬방향(flex-direction)과 같은 방향으로 아이템의 여백을 관리할 때 설정한다.

- flex-direction이 row면 수평으로, column이면 수직으로 배치된다.

- 기본값은 flex-start이다.

.parent {
	display: flex;
	justify-content: center;
}

 

- align-items : 아이템 정렬 방향(flex-direction)과 수직 방향으로 아이템의 여백을 관리할 때 설정한다.

- flex-direction이 row면 수직으로, column이면 수평으로 배치된다.

- 기본 값은 stretch이다.

.parent {
	display: flex;
	align-items: flex-start; 
}

 

 

- flex-wrap : 아이템이 컨테이너를 넘어섰을 때 어떻게 처리할 것인지 설정한다.

- 기본 값은 nowrap으로 너비나 높이를 부모의 크기를 기준으로 자식들이 줄바꿈 없이 알아서 공간을 나눠서 나열된다

- 많은 상품 아이템들을 보여줘야 할 때 flex-wrap에 wrap을 설정하면 알아서 줄바꿈이 된다.

.parent {
	display: flex;
	flex-wrap: wrap; /*nowrap(기본), wrap ... */
}

 

 

3. 아이템 속성 (자식 속성)

- flex-basis : 자식의 최소 너비를 설정할 때 사용한다. (수직 정렬일 때는 높이가 된다!), 기본값은 auto이다.

 

- flex-grow : container에 여백이 생겼을 때 아이템이 어떻게 영역을 차지할지 설정한다. 다른 아이템들과 비교해서 해당 비율로 여백을 가져가며 기본 값은 0이다.

 

- flex-shrink : container가 자식들이 차지하는 공간보다 줄어들었을 때 너비를 어떤 비율로 줄일지 정한다. 다른 아이템들과 비교해서 해당 비율로 줄어들게 되며 기본값은 1이다.

 

 

위의 요소들을 합쳐서 flex라는 하나의 속성으로 요약해서 표현하곤 한다.

flex: 증가너비 감소너비 기본너비; 
/*만약 해당 값들이 생략되면 기본 값이 적용됨*/

.child {
	flex: 1 1 20px /*증가너비 감소너비 기본너비*/
	flex: 1; /*증가너비만 적용되고 감소너비(1), 기본너비(auto)는 기본값으로 적용됨 */
	flex: 1 1; /*증가너비, 감소너비가 적용됨*/
	flex: 1 30px; /*증가너비, 기본너비가 적용됨*/
}

 

 

 

 

 

 

 

보다 자세한 내용은 여길 참고하자!

https://heropy.blog/2018/11/24/css-flexible-box/