CSS - [ 속성(flex) ]

이제 플렉스에 대해 알아보자. 플렉스(flex)는 1차원의 레이아웃 개념과 같다. 이전까지 요소를 출력했을 때는 수직으로 출력되었다. 수평 정렬 할 때는 아주 간단하게 display: flex; 값만 넣어주면 된다! 이 때 flex 값을 넣어 준 요소는 container, 수평 정렬 된 요소들은 item 이라고 부른다. css에서 container와 itme에 넣을 수 있는 속성들이 각각 다르다는 점에 주의하자.

 

아래와 같이 코드를 작성하면

이렇게 뜨는데,

container에 flex 값만 넣어주면

이렇게 수평정렬된다!

 

 

---

1. Container 속성

• dispaly : Flex Container의 화면 출력 특성을 지정하는 속성이다. (이전에 block과 inline 등 을 넣어 사용했던 속성!) Flex Container를 inline 요소처럼 활용해야 할 때는 inline-flex 값을 주고, block처럼 활용할 때는 flex 값을 주면 된다. 즉 inline-flex 값을 주면 container가 인라인 요소들 처럼 가로로 쌓이고, flex 값을 주면 세로로 쌓인다고 보면 된다.
• flex-direction : container의 주 축을 설정하는 속성이다. 기본값은 수평축이 주 축이 되는  row(좌->우)이고, 반대로(우->좌) 할 때는 row-reverse 값을 사용한다. 수직과 관련된 주 축을 설정할 땐 column(위->아래), 반대로(아래->위) 할 때는 column-reverse 값을 사용한다. 말 보다 그림으로 보는게 이해하기 쉬울듯! 참고로 flex는 수평 정렬할 때 주로 사용하므로 column값은 굳이 사용하는 경우가 잘 없다.

 

아래는 수평축이 주 축이 되는 값을 넣은 경우이다. 수평 정렬 되고 x축이 주 축, y축이 교차축이 된다.

row 값일 때 -> 왼쪽이 시작점, 오른쪽이 끝점

row-reverse일 때 -> 오른쪽이 시작점, 왼쪽이 끝점

 

 

아래는 수직축이 주 축이 되는 값을 넣었을 때 이다. 여기서는 수직 정렬 되고 y축이 주 축, x축이 교차축이 된다.

column일 때 -> 위가 시작점, 아래가 끝점

column-reverse일 때 -> 아래가 시작점, 위가 끝점

 

 

 

• flex-wrap : flex items의 묶음(=줄 바꿈 처리) 여부를 지정하는 속성. 기본값은 묶음(줄 바꿈) 없는 nowrap이고, 여러 줄로 묶는 wrap 값을 줄 수 있다. nowrap일 때는 칸이 모자라면 한 줄에 item들을 표현하기 위해 크기가 찌그러질 수 있다. 그림으로 확인해보자!

가로 세로 100px의 정사각형 요소들인데 flex로 설정하니 한 줄에 수평 정렬하기 위해 크기가 이상해졌다.

wrap 값을 넣어주니 원래의 크기대로 나오고, 한 줄을 넘어가는 요소들은 줄 바꿈되어 나타났다.

 

 

 

• justify-content : 주 축의 정렬 방법 지정 속성. 수평 정렬 할 때는 수평 축, 즉 x축이 주 축이 되므로 곧 수평 정렬의 방법을 결정하는 속성이라고 보면 된다(물론 주 축이 바뀌면 달라질 것임!). 기본값은 flex items를 시작점으로 정렬하는 flex-start(=왼쪽 정렬)이고 끝점으로 정렬하는 flex-end(=오른쪽 정렬), 가운데 정렬하는 center 값이 있다. 간단하게 한글에서 정렬하는 것 처럼 왼쪽 정렬 오른쪽 정렬 가운데 정렬을 정하는 것과 같다고 보면 된다.
• align-content : 교차 축의 여러 줄 정렬 방법. 곧 수직 정렬 방법을 결정하는 속성과 같다. 기본값은 flex items를 시작점으로 정렬하는 stretch이고, 마찬가지로 시작점으로 정렬하는 flex-start, 끝점으로 정렬하는 flex-end, 가운데 정렬하는 center 값이 있다. 기본적으로 줄 바꿈 상태여야하고(wrap 상태여야 하고 실제로 item이 2 줄 이상일 때만 동작), 빈 공간이 있어야 한다. 이것도 그림으로 알아보자!!

stretch는 시작점을 기준으로 정렬하되, 2줄로 나뉠 경우 container를 딱 2줄로 나눠서 거기에 맞춰 정렬된다. 만약 item에 높이 값을 주지 않으면 최대한 늘려져서 나타난다.

start의 경우 시작점을 기준으로 2줄이 딱 붙어서 정렬된다.

center의 경우 2줄이 가운데에 정렬되고, 

end의 경우 2줄이 끝 점에 딱 붙어서 정렬된다.

 

 

 

• align-items : 교차 축의 한 줄 정렬 방법 지정 속성. align-content의 경우 여러 줄이었던 반면 align-itmes는 한 줄 정렬 방법이다. 값은 마찬가지로 stretch, flex-start, flex-end, center 값이 있다. 그림으로 간단하게 알아보자.

start의 경우, 여기서 item이 2줄로 나뉘므로 container를 2줄로 딱 나눠서 각각의 시작점에 맞게 정렬된다.

center의 경우 각 줄에서 가운데 정렬되고,

end의 경우 각 줄에서 끝점에 정렬된다.

 

---

2. item 속성

이제 container가 아니라 item에 부여하는 flex 관련 속성들에 대해 알아보자.

* 가로 세로 너비를 안 주면 가로는 최소한으로 줄고, 세로는 최대한으로 늘어난다.

• order : Flex Item의 정렬 순서를 부여한다. 기본값은 순서가 없는 0이고, 숫자값이 작을 수록 먼저 정렬된다. 음수값을 줄수도 있다.
• flex-grow : Flex Item의 증가 너비 비율을 결정하는 속성. 기본값은 0이고 숫자값을 통해 증가 비율을 지정해 줄 수 있다. 간단하게 실습으로 알아보자!

예를 들어 아래와 같이 요소들이 있을 때,

1번 요소에 flex-grow 값을 1을 주면, 2 3번 요소는 증가 비율이 0인 상태이므로 나머지 공간을 1번 요소가 모두 차지한다.

2번 요소에 값을 2를 주고 3번 요소에 1을 주면, 증가 비율이 0인 1번 요소를 제외한 나머지 공간을 2와 3번 요소가 2대 1의 비율로 차지하게 된다.

 

 

• flex-shrink : Flex Item의 감소 너비 비율을 지정하는 속성. 기본값이 Flex Container 너비에 따라 감소 비율을 적용하는 1이고, 숫자값을 통해 감소 비율을 조절할 수 있다. 만약 값을 0을 주면 감소 너비가 없는 것과 같다. 그러면 어떤 화면이 출력될까?

아래와 같이 요소들에 가로 세로 100px을 주었는데 container의 크기가 충분하므로 공간이 남는다.

이 때 container의 크기를 줄였더니, 정사각형이던 요소들이 찌그러졌다. 기본적으로 flex-shrink 값이 1이 적용되어있기 때문에 container의 크기가 줄어든 비율만큼 요소들도 줄어들었다.

여기서 flex-shrink 값에 0을 주면 container의 크기에 상관없이 요소 원래의 크기를 유지할 수 있다!

 

 

• flex-basis : Flex Item의 공간 배분 전 기본 너비 지정 요소. 기본값은 요소의 content 너비인 auto이고, 단위를 줘서 값을 지정할 수 있다. 요소에 flex-grow 값을 줘서 증가 너비 비율을 지정할 때, flex-basis의 값이 auto로 되어있으면 content, 즉 '글자가 들어있는 내용의 값을 제외'하고 지정된 증가 너비 비율대로 늘어난다. 내용과 상관없이 요소 전체의 너비를 맞추고 싶으면 flex-grow에 원하는 비율대로 값을 넣어주고, flex-basis 값을 다 0으로 넣어주면 된다.

사진을 보면 flex-basis가 auto로 되어있을 때, content영역을 제외하고 flex-grow의 비율대로 맞춰지는 것을 볼 수 있다.  따라서 요소 전체의 너비가 flex-grow의 비율과 같지 않다.

위 사진과 비슷한 상황이다. 1,2 번 요소에 flex-grow 값 1, 3번 요소에 felx-grow값 2를 주었는데 비율이 1:1:2가 아니다. 여기서 item들에 flex-basis에 0 값을 주면

이렇게 내용과 상관없이 요소 전체의 너비가 1:1:2로 맞추어진다!

---