플렉스(정렬) - Container

개요

display : flex;
displdy : inline-flex;

display : flex, display : inline-flex

display : flex

• flex를 적용한 부모요소는 블록 속성을 가집니다.

display : inline-flex

• inline-flex를 적용한 부모요소는 인라인(블록) 속성을 가집니다.

flex-direction

주 축을 설정합니다.
정렬을 위한 속성입니다.

• row, row-reverse 는 수평과 관련된 값이고,
  column, column-reverse는 수직과 관련된 값입니다.

row : 왼쪽에서 오른쪽으로 수평 정렬됩니다.
row-reverse : 오른쪽에서 왼쪽으로 수평 정렬됩니다.

column : 왼쪽에서 오른쪽으로 수평 정렬됩니다.
column-reverse : 오른쪽에서 왼쪽으로 수평 정렬됩니다.

flex-wrap

Flex Items 묶음(줄 바꿈) 여부를 설정합니다.

• nowrap 묶음(줄 바꿈) 없음. (기본값)
• wrap 여러 줄로 묶음.
• wrap-reverse wrap의 반대 방향으로 묶음.

justify-content

주축의 정렬 방법을 설정합니다.
(수평정렬일 경우 x축이 주축입니다.)

• flex-start Flex Items를 시작점으로 정렬
• flex-end Flex Items를 끝점으로 정렬
• center Flex Items를 가운데 정렬
• space-between 각 Flex Item 사이를 균등하게 정렬
• space-around 각 Flex Item의 외부 여백을 균등하게 정렬

align-content

교차 축(수직)의 여러 줄 정렬 방법
(수평정렬일 경우 y축이 교차축입니다.)

2줄 이상일때만 동작합니다.
그러므로 align-content를 사용하려면,
flex-wrap: wrap으로 설정되어 있어야 합니다.
부모요소(Flex Container)의 여유공간이 있어야 합니다.

그래서 align-content보다는 한 줄 일때 적용되는 아래의 align-items가 좀 더 많이 사용됩니다.

• stretch Flex Items를 시작점으로 정렬
• flex-start Flex Items를 시작점으로 정렬
• flex-end Flex Items를 끝점으로 정렬
• center Flex Items를 가운데 정렬
• space-between 각 Flex Item 사이를 균등하게 정렬
• space-around 각 Flex Item의 외부 여백을 균등하게 정렬

• 첫번째 경우는 height를 지정하지 않아 기본값인 height: auto가 지정됐고, align-content를 지정하지 않아 align-content: stretch가 적용되어 한줄의 높이 만큼 items들이 늘어납니다.
• 두번째 경우는 height: 100px이라고 명시했기 때문에 늘어나지 않고 100px만큼 items의 높이가 유지됩니다.

align-items

교차 축의 한 줄 정렬 방법

• align-content는 여러줄일때만 동작하기 때문에 위처럼 한 줄 일때는 동작하지 않습니다. 한 줄 일때는 align-items를 사용해야 합니다.

플렉스(정렬) - item

item(자식)에 설정할 수 있는 속성들을 알아봅니다.

flex-grow 와 flex-basis 의 preview

각각의 item들이 얼마나 늘어나는지 비율을 명시할 수 있습니다.

기본값은 0 입니다.

• flex-grow 설정을 하지 않았을 경우입니다.

• flex-grow: 1; 으로 설정하면, 각각의 item들이 1 : 1 : 1 비율로 늘어납니다.

• item들에 flex-grow: 1; 을 설정하고, 3번째 item에만 flex-grow: 2; 로 덮어쓰기하면 1 : 1 : 2 비율이 되지만, 화면상에는 정확히 1 : 1 : 2 비율로 보이지 않습니다.

• item들에 flex-basis: 0;을 설정하면 이제야 화면상으로 정확히 1 : 1 : 2 비율이 됩니다.

order

각각의 item에 각각 다른 order 값을 적용하여 임의로 순서를 바꿀 수 있습니다.

• 0 : 순서 없음 (기본값)
• 숫자 : 숫자가 작을 수록 먼저

• 위처럼 HTML의 구조를 바꾸지 않고도 화면의 출력 순서를 그때 그때 다르게 만들어 줄 수 있습니다.

flex-grow

한 줄에서 item들이 차지하고 남은 빈 공간을 채우기 위해서 각각의 item들이 몇의 비율로 채워 나갈 것인지를 결정합니다.

• 기본값이 0 이기 때문에 item에 이 속성값을 사용하지 않았을 때는 너비가 늘어나지 않았습니다.

• 두번째 그림은 B와 C는 증가 비율이 0으로 전혀 증가 하지 않으며, A는 증가비율이 1 이므로 너비를 늘려서 남아있는 공간을 전부 차지합니다.

• 세번째 그림은 증가비율이 없는 A가 차지한 영역만을 제외한 나머지 공간을 B와 C가 각각 2 : 1 비율로 나눠서 차지합니다.

flex-shrink

• flex-grow 와는 다른게 기본값이 0 이 아니고 1 입니다.
• 감소 너비 비율을 0을 입력하면 감소 너비 없음 을 의미합니다.

• 첫번째 그림에서 부모요소(Container)의 너비를 두번째 그림처럼 각각의 item들의 원래 너비를 유지하지 못 할 만큼 줄여나가면 item들의 너비가 강제로 줄어서 부모요소 밖으로 나오지 않게 합니다.
  이것은 flex-shrink의 기본값이 1 이므로 부모요소의 너비에 맞추어서 각각의 item들이 줄어든 너비 만큼을 나눠가져 줄기 때문입니다.
• 세번째 그림처럼 flex-shrink : 0을 부여하면 부모의 너비를 줄여서 item이 밖으로 돌출되더라도 각각의 item들의 너비가 감소하지 않습니다.

수평 정렬한 요소들이 찌그러지기를 원하지 않는다면 전체 item들에 flex-shrink : 0을 부여하면 해당하는 문제를 해결할 수 있습니다.

flex-basis

• 위에서 본 것 처럼 요소의 크기가 1 : 1 : 2 비율이 안되는 이유는 flex-basis: auto가 기본값이고, auto는 요소의 Content 너비 이므로 각각의 요소들의 Content 만큼을 제외한 나머지 공간을 1 : 1 : 2의 비율로 나누어 가지므로 전체 요소의 크기의 1 : 1 : 2의 비율이 되지 않는 것입니다.

• 위처럼 flex-basis: 0;으로 설정하면flex-basis의 Content 너비를 모든 요소가 0이 되므로 각각의 요소가 모든 공간을 1 : 1 : 2비율로 나누어 가집니다.