CSS 레이아웃 - FlexBox

# FLEXBOX

 

플렉스박스는 아주 쉽게 설명하면 

‘1차원’ 으로 배치하는 것 입니다.

그래서 가로 혹은 세로 의 방향성을 먼저 정하고 요소를 배치하는 거죠

가로로 배치하기로 정했다면, 가상의 화살표 위에 요소를 어디에 배치할지를 정합니다.

화살표 처음 또는 끝에 위치하게 또는 양끝 

중앙정렬

넘치면 어떻게 배치 등등 

다양한 방식의 배치 설정이 가능해 집니다.

또한 요소의 크기를 유연하게 늘리거나 줄이거나 간격을 조정할 수도 있습니다.

#배치방향

  현재 컨테이너 박스를 크게 만들고 그 안에 div 3개를 각각 다른색으로 지정했습니다.

  평소에 보던 것 처럼 블락이 적용되면서 세로로 배치가 되고 있네요.

이제 컨테이너에 display : flexbox를 줘보겠습니다.

  

 

세로로 배치가 되는 걸 볼수 있습니다. 

flexbox의 기본 방향은 가로라서 주기만 해도 가로 방향이 되는 것 입니다.

검사를 해보면 기본으로 

flex-direction : row 를 확인 할수있습니다. 

flex-direction : column 을 주면 원래 처럼 세로 배치가 가능하겠네요

(*row는 행 / column은 열 을 의미합니다)

(*row-reverse 처럼 끝에 붙이면 역으로 배치가 되는 것도 가능합니다)

 

#정렬

요소는 화살표를 기준으로 1차원으로 배치가 된다고 했습니다.

용어 두개만 짚고 넘어가죠

 

기본축(main axis)  : 요소가 배치되는 방향    → 요소의 배치를 담당

교차축(cross axis) : 요소 배치의 반대 방향   → 교차 축 방향으로 꽉채움 

 

방향이 가로가 기본이면 -> 기본축은 가로 / 교차축은 세로

방향이 세로가 기본이면 -> 기본축은 세로 / 교차축은 가로

 

용어를 정리했으니 정렬을 알아 보겠습니다.

 

기본 축 방향으로의 정렬은

justify-content : ~~ 를 사용합니다 

center를 집어 넣으면 가로 축 기준으로 중앙정렬이 되겠죠

 

다음으로 

교차축 정렬을 하겠습니다.

align-items : ~~ 

를 통해서 정렬이 가능합니다. 먼저  center를 넣어보죠

세로로 가득 찼던 요소들이 원래의 크기로 돌아가며 세로중앙 정렬이 됐네요.

여기에 그린에 height를 주면 그린의 높이만 커지게 됩니다. 하지만 정렬은 유지하죠

 

*기본축이 세로로 바뀌게 되면 justify와 align의 방향이 바뀌게 됩니다.

바로 flex-direction : column 으로 변경하면

세로 배치가 되면서 , 

기본축이 세로가 되면서 justify 로 조절이 되고

교차축이 가로가 되면서 align 으로 조절이 되게끔 바뀌는 거죠. 

  (기본값이 stretch가 적용되어 가로로 꽉차는 모습도 볼수 있네요)

그러면 중앙정렬을 하고 싶으면 align-items : center가 되야지 가로가 바뀌겠죠 (교차축)

flex 정렬	justify-content (기본축)	center flex-end flex-start space-around space-between	중앙정렬 끝 정렬 시작정렬 (기본값) 동일간격으로 퍼지게 꽉채워서 동일간격 퍼지게
	align-items (교차축)	center stretch	중앙정렬 늘려서 정렬 (기본값)

# 요소가 넘칠 때 

 

그림을 보면 현재 안에 div가 너무 많아서 컨테이너를 넘어서 보여지고 있습니다.

flex-wrap : wrap 

을 주게 되면 교차축 방향으로 넘치는 요소들이 정리가 됩니다. (오른쪽 그림은 column일 때)

# 간격

 

간격은 기본적으로 마진을 통해서 줍니다.

플렉스 박스도 마찬가지로 마진을 줄 수 있죠.

 

그러면 모든 div에 간격을 주려면 어떻게 해야 할까요?

 

참고) 

이 코드를 쓰면 마지막 박스를 제외 하고 마진을 넣을수 있습니다.

 

하지만 요즘에 더 간단한 gap을 사용하죠

gap 의 경우 세로 가로 순서 로 적용이 됩니다. 

*이 방향은 기본축과는 무관하게 적용됩니다. ( 그 이유는 그리드에 쓰이는 속성이라 그렇습니다)

#요소 꽉 채우기 

 

요소를 통해서 빈공간을 채우고 싶을때

flex-grow : 1 을 통해서 요소를 얼마나 늘릴지 정하고 

flex-shirink : 0 을 통해서 요소를 얼마나 줄일지 정합니다.

 

그림처럼 우측에 빈 공간을 채우기 위해서는 

요소 중 하나에 flex-grow를 주면 됩니다. 그린에 줘보겠습니다.

그린이 ‘상대적’으로 크기가 늘어나며 커졌습니다.  

flex-grow 는 기본값이 0입니다. 

그래서 1 / 2 이런 값을 주면서 상대적인 크기를 설정할 수 있게 되는것입니다. 

 

반대로 줄이는 것을 보겠습니다.

동일 상황에서 컨테이너에 width를 크게 줘보겠습니다. (width : 300)

width 가 크니까 빠져나갈 줄 알았는데, 동일한 너비로 지정이 되네요

그 이유는 기본값으로

flex-shrink : 1 이 설정되있기 때문입니다. 

개발자 도구로 확인해보면, 레드가 빗금만큼 줄어들었다를 보여주네요

레드에 flex-shrink : 0 / 그린에 1 / 블루에 2를 주면 우측 그림처럼 상대적인 크기를 가지며 줄어들죠

레드는 0이기 때문에 설정했던 width 300 이 전부 적용되고 ,

나머지 width 를 그린과 블루가  shrink 값으로 나눠가지게 되며 분배되는 것 입니다.

 

자주 사용하는 것은 

flex-grow : 1   (빈공간 채우기)

flex-shrink : 0 (요소 크기 고정)

flex-basis 는 width 대신 사용 하는 듯?