Flex
flex는 행과 열 형태로 항목 무리를 배치하는 일차원을 사용하는 레이아웃 구조로 요소들을 수평과 수직정렬 할 때 사용하는 메서드입니다.
특히 기본적인 block 요소들은 수직으로 요소들이 쌓이므로 주로 수평적인 요소 정렬에 용이하게 사용됩니다.
정렬하고자 하는 요소들의 부모 요소에 대하여 display 값을 flex로 지정하면 요소들이 x축 방향인 수평방향으로 정렬되어집니다.
여기서 부모 요소를 flex container라고 부르며 자식 요소들을 flex items라고 부르며 두 가지의 큰 개념으로 flexbox가 이루어집니다.
주축(main-axis)과 교차축(cross-axis)이라는 상대적인 개념이 존재하며 주축은 flex container가 쌓이는 방향의 축을 의미하며 교차축은 당연히 주축의 반대 방향의 축을 의미합니다.
비슷한 개념으로 flex-start와 flex-end의 개념이 존재하며 flex container에서 주축을 기준으로 container 박스의 크기가 시작되는 지점을 flex-start라고 하며 반대로 container의 박스의 크기가 끝나는 지점을 flex-end라고 부릅니다.
Flex Container 속성
Flex Container에만 지정 가능한 속성들에 대하여 알아봅시다
codepen의 html 양식이 커보이면 result 창에서 크기를 0.5배의 크기로 조절하여 주세요.
display
flex를 block과 lnline요소의 특성을 가지도록 설정하는 속성으로 값으로 flex와 inline-flex가 존재한다.
1. flex
block 요소와 유사한 특성을 가지며 container가 수직으로 쌓이며 가로 너비를 최대한 크게 활용하려고 한다.
2. inline-flex
inline 요소와 유사한 특성을 가지며 container가 수평으로 쌓이며 가로 너비를 최대한 적게 활용하려고 한다.
flex-direction
각각의 아이템들이 어느 축을 사용하여 정렬할지에 대하여 정하는 속성이다. flex에서는 x축과 y축에 대해 나뉘어진다.
1. row
행(줄)을 기준으로 x축에 해당하며 왼쪽에서 오른쪽의 진행방향을 가지며 수평정렬을 다룬다. (기본값에 해당된다)
2. column
열(칸)을 기준으로 y축에 해당하며 위쪽에서 아래쪽의 진행방향을 가지며 수직정렬을 다룬다.
3. row-reverse
row 값과 달리 수평 정렬에서 왼쪽 -> 오른쪽의 진행방향이 아닌 오른쪽 -> 왼쪽의 진행방향을 가진다.
4. column-reverse
column 값과 달리 수직 정렬에서 위쪽 -> 아래쪽의 진행방향이 아닌 아래쪽 -> 위쪽의 진행방향을 가진다.
flex-wrap
container의 크기만큼 item들이 쌓였을 때 자동으로 줄바꿈을 적용할지에 대한 속성이다.
1. nowrap (기본값)
줄바꿈 처리를 하지 않아 각각의 item들이 지정 크기 보다 작게 줄어들게 된다.
2. wrap
줄바꿈 처리를 하며 각각의 item들이 지정 크기를 유지하게 된다.
3. wrap-reverse
container의 주축에서 반대방향 (위 -> 아래의 경우에서 아래 -> 위의 방향)으로 줄바꿈이 이루어진다.
justify-content
주축의 정렬 방법을 설정해주는 속성
1. flex-start
주축의 시작점 부터 item들을 정렬하는 속성으로 기본값에 해당된다.
2. flex-end
주축의 끝점으로 item들을 정렬하는 속성으로 오른쪽 정렬과 다른 개념으로 이 속성은 어디까지나 container에 지정해주는 속성으로 container의 끝에 item들을 위치시킨다는 개념으로 이해하자
3. center
item들을 container의 가운데 정렬한다.
4. space-between
가장 첫 item과 마지막 item을 시작점과 끝점에 위치 시키고 중간 item들을 균등한 간격으로 위치시킨다.
5. space-around
각각의 item에 양 끝에 균등한 간격을 두고 item들을 위치시킨다.
align-items
container와 item의 주축과 반대되는 교차축과 관계되는 속성으로 item들의 정렬을 이루는 속성이다.
1. stretch
기본값으로 container의 item에 별도의 높이가 지정되어 있지 않다면 block 요소의 높이 값을 최대한 작게 가져가려는 특성과 달리 container의 교차축 전체 길이만큼 item의 길이가 지정된다.
2. flex-start
container의 교차축의 시작 지점에서부터 item들이 정렬된다.
3. flex-end
container의 교차축의 끝 지점에서부터 item들이 정렬된다.
4. center
container의 교차축의 가운데 지점에서부터 item들이 정렬된다.
5. baseline
container 속 item들의 문자 기준선을 맞추어 정렬이 이루어진다. 아래의 경우 문자의 크기가 다르며 모든 item들의 문자의 가장 아래 기준선을 토대로 정렬이 되어진 것을 볼 수 있으며 container의 레이아웃 보다 글자를 기준으로 교차축 정렬을 할 때에 유용하다.
align-content
container의 item들이 flex-wrap 속성에서 wrap의 값을 가지며 container가 item들을 2줄 이상을 통해 가지게 되는 경우에 효과가 나타나는 속성이다. 즉, 1줄인 경우에는 속성의 효과가 나타나지 않고 여러 줄의 교차축 정렬에 용이하다.
1. stretch
기본값으로 flex-wrap 속성의 값이 wrap인 경우 전체 container의 교차축 크기에서 wrap에 의해 item들이 정렬되어지는 줄의 숫자만큼 나누어진 크기에서 item들이 정렬되어진다.
아래의 코드는 두 줄의 item들이 정렬되어졌으므로 전체 container의 교차축 높이에서 절반에 해당하는 위치에서 부터 item들이 정렬되어지는 모습을 볼 수 있습니다.
2. flex-start
기본값의 경우와 달리 각각의 줄에 따로 크기를 지정하지 않고 여러 줄의 item들을 하나로 묶어 교차축의 시작지점에 정렬하는 속성이다.
3. flex-end
위와 반대의 경우로 item 그룹이 교차축 아래에 정렬되어지는 것을 볼 수 있다.
4. center
container의 교차축에서 가운데 위치에 여러 줄의 item 그룹을 정렬시킨다.
5. space-between
가장 첫 줄에 해당하는 item들은 교차축을 기준으로 시작점에 그리고 마지막 줄에 해당하는 item들은 끝점에 위치하며 중간에 속한 줄의 item들은 일정한 간격을 유지하며 위치하게 된다.
6. space-around
모든 줄에 교차축의 양 옆에 일정한 간격을 포함시켜 item들을 위치시킨다.
Flex Items 속성
Flex Items에만 지정 가능한 속성들에 대하여 알아봅시다
codepen의 html 양식이 커보이면 result 창에서 크기를 0.5배의 크기로 조절하여 주세요.
flex-grow
item들의 증가 너비 비율을 설정하며 기본값은 0이다.
item들의 주축에 해당하는 width, height 값이 지정되어져 있다면 그 크기를 제외한 나머지 크기의 비율을 설정하는 속성이다.
아래 코드에서 보면 100px을 제외한 나머지 item들의 크기가 이 속성에 의해서 각각의 비율만큼 1 : 2: 1의 크기로 이루어져있다.
여기서 정확이 container 크기에 각각의 item의 크기를 비율별로 정확히 맞춰주려면 width와 height 중 주축의 지정된 값을 지워주면 브라우저가 자동으로 관리해준다.
아래와 같이 특정 item에만 flex-grow 값을 지정하여 가변적인 레이아웃을 활용할 수 있다.
flex-shrink
container의 크기가 작아지는 상황에서 item들의 크기 역시 감소하게 할 지에 대해 설정할 수 있는 속성입니다.
item들의 감소 너비 비율을 설정하며 기본값은 1이며 0인 경우 container의 크기가 전체 item들의 크기 보다 줄어들어도 item의 크기가 줄어들지 않습니다.
값이 클수록 감소 너비 비율이 증가하게 됩니다.
대부분의 경우 item의 감소 너비 비율이 있느냐 없느냐에 대한 정도로만 활용을 합니다.
flex-basis
item의 기본 너비 값을 설정하는 속성으로 기본값은 auto입니다. 기본값인 경우 item에 지정된 가로, 세로 너비를 사용해서 item들을 설정합니다.
주의할 점은 이 속성에 값을 부여하면 지정된 가로, 세로 너비의 값이 무시되고 basis의 값이 적용되어 나타납니다.
아래의 경우는 기본 basis 값을 통해 200px을 제외한 남는 크기의 공간을 1:2:1로 채워진 것을 이해할 수 있습니다.
flex
위의 세 가지 속성 전체를 합쳐서 쓸 수 있는 단축 속성으로 flex: grow shrink basis 의 형태를 가지게 됩니다.
주의사항은 아래와 같이 단축 속성을 생략하여 활용할 경우 예상치 못한 레이아웃을 초래할 수 있습니다. 그러므로 단축속성을 사용할 때 에는 되도록이면 모든 값을 명시된 형태로 사용하는 방법을 지향합시다.
/* flex: grow shrink basis; 형태의 단축 속성 */
/* flex: 0 1 auto 기본값의 형태 */
/* 모든 단축 속성에 값이 명시된 형태 */
flex: 1 1 auto ;
/*
shrink basis 값이 생략된 상태는 위와 동일하지 않고 생략된 경우 basis는 auto가 아닌 0의 값이 적용됩니다.
즉, flex: 1 1 auto; 와 flex: 1;은 다른 레이아웃을 초래하게 된다.
*/
flex: 1;order
item의 순서를 지정해주는 속성으로 기본값은 0으로 이루어져 있으며 값이 증가할수록 item이 뒤로 밀려나게 됩니다.
아래의 경우 기본값 0으로 지정된 item들과 달리 1로 지정된 item이 맨 끝으로 밀리는 모습을 볼 수 있습니다. 이는 레이아웃을 아주 편하게 다룰 수 있는데에 용이합니다.
속성 값으로 음수 역시 지정이 가능하며 -1, 0, 1로 item들에 값이 부여된다면 작은 값을 가지는 item부터 배치가 이루어지게 됩니다.
align-self
기본 값은 auto이며 container에 지정된 align-items에 지정된 값을 상속받는 개념입니다. 기본 값이 아닌 경우는 모든 align-items의 값을 상속 받아 사용할 수 있는 개념입니다.
이 속성이 유용한 점은 align-items를 통한 큰 단위 그룹의 item 정렬에서 개별적으로 item에 새로운 정렬을 구현할 수 있다는 점입니다.
아래의 경우 모든 줄은 align-items 속성을 통해 정렬되어진 상태에서 첫 번째 자식요소만 align-selft 속성을 통해 flex-start 속성이 적용되어진 모습을 볼 수 있습니다.
브라우저에 따른 호환성
Can I use 사이트를 통해 여러 가지 속성들에 대해 지원되는 브라우저의 정보들을 쉽게 얻을 수 있습니다.
이를 통해 내가 구현하려는 속성에 대하여 여러 브라우저의 하위호환성을 조사하여 나의 프로젝트에 사용여부를 결정하는 것 역시 규모가 큰 프로젝트에서 용이할 것 입니다.
참고자료
