Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.
우선 Flex는 2개의 개념으로 나뉩니다.
첫 번째는 Container 두 번째는 Items 입니다.
Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.
주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.
Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며,
Items에는 order, flex, align-self 등의 속성을 사용할 수 있습니다.
Flex Container를 위한 속성들은 다음과 같습니다.
속성 | 의미 |
---|---|
display | Flex Container를 정의 |
flex-flow | flex-direction와 flex-wrap의 단축 속성 |
flex-direction | Flex Items의 주 축(main-axis)을 설정 |
flex-wrap | Flex Items의 여러 줄 묶음(줄 바꿈) 설정 |
justify-content | 주 축(main-axis)의 정렬 방법을 설정 |
align-content | 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) |
align-items | 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) |
값 | 의미 |
---|---|
flex | Block 특성의 Flex Container를 정의 |
inline-flex | Inline 특성의 Flex Container를 정의 |
flex와 inline-flex는 차이는 단순합니다.
display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.
여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의합시다.
두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.
Items의 주 축(main-axis)을 설정합니다.
값 | 의미 | 기본값 |
---|---|---|
row | Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 | row |
row-reverse | Items를 row의 반대 축으로 표시 | |
column | Items를 수직축(위에서 아래로)으로 표시 | |
column-reverse | Items를 column의 반대 축으로 표시 |
주 축(main-axis)과 교차 축(cross-axis)
위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같습니다.
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.
시작점(flex-start)과 끝점(flex-end)
시작점(flex-start)과 끝점(flex-end)이라는 개념도 있습니다.
이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭합니다.
역시 방향에 따라 시작점과 끝점이 달라집니다.
Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.
값 | 의미 | 기본값 |
---|---|---|
nowrap | 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) | nowrap |
wrap | Items를 여러 줄로 묶음 | |
wrap-reverse | Items를 wrap의 역 방향으로 여러 줄로 묶음 |
기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 합니다.
주 축(main-axis)의 정렬 방법을 설정합니다.
값 | 의미 | 기본값 |
---|---|---|
flex-start | Items를 시작점(flex-start)으로 정렬 | flex-start |
flex-end | Items를 끝점(flex-end)으로 정렬 | |
center | Items를 가운데 정렬 | |
space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 균등하게 정렬 | |
space-around | Items를 균등한 여백을 포함하여 균등하게 정렬 |
교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.
+) Items가 한 줄일 경우 align-items 속성을 사용하세요.
값 | 의미 | 기본값 |
---|---|---|
stretch | Container의 교차 축을 채우기 위해 Items를 늘림 | stretch |
flex-start | Items를 시작점(flex-start)으로 정렬 | |
flex-end | Items를 끝점(flex-end)으로 정렬 | |
center | Items를 가운데 정렬 | |
space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 | |
space-around | Items를 균등한 여백을 포함하여 정렬 |
교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.
값 | 의미 | 기본값 |
---|---|---|
stretch | Container의 교차 축을 채우기 위해 Items를 늘림 | stretch |
flex-start | Items를 각 줄의 시작점(flex-start)으로 정렬 | |
flex-end | Items를 각 줄의 끝점(flex-end)으로 정렬 | |
center | Items를 각 줄의 가운데 정렬 | |
baseline | Items를 각 줄의 문자 기준선에 정렬 |
Flex Items를 위한 속성들은 다음과 같습니다.
속성 | 의미 |
---|---|
order | Flex Item의 순서를 설정 |
flex | flex-grow, flex-shrink, flex-basis의 단축 속성 |
flex-grow | Flex Item의 증가 너비 비율을 설정 |
flex-shrink | Flex Item의 감소 너비 비율을 설정 |
flex-basis | Flex Item의 (공간 배분 전) 기본 너비 설정 |
align-self | 교차 축(cross-axis)에서 Item의 정렬 방법을 설정 |
Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.
+) HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.
값 | 의미 |
---|---|
0 | 순서 없음 |
숫자 | 숫자가 작을 수록 먼저 |
Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다.
값 | 의미 | 기본값 |
---|---|---|
flex-grow | Item의 증가 너비 비율을 설정 | 0 |
flex-shrink | Item의 감소 너비 비율을 설정 | 1 |
flex-basis | Item의 (공간 배분 전) 기본 너비 설정 | auto |
flex: 증가너비 감소너비 기본너비; .item { flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */ flex: 1 1; /* 증가너비 감소너비 */ flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */ }```
flex-grow를 제외한 개별 속성은 생략할 수 있습니다.
만약 flex: 1;로 작성하면 flex-grow: 1;과 같습니다.
그러면 나머지 속성은 생략했으니 기본값이 적용되어 flex-shrink: 1;, flex-basis: auto;가 되겠죠?
즉 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 auto;와 같다고 볼 수 있습니다만 그렇지 않습니다.
flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용됩니다.
다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다는 것입니다.
이 부분을 기억하지 않으면 엉뚱한 결과가 나올 수 있으니 주의합시다!
Item의 증가 너비 비율을 설정합니다.
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.
Item이 감소하는 너비의 비율을 설정합니다.
숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.
Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.
값 | 의미 | 기본값 |
---|---|---|
auto | 가변 Item과 같은 너비 | auto |
단위 | px, em, cm 등 단위로 지정 |
출처 - https://heropy.blog/2018/11/24/css-flexible-box/
이 포스트는 패스트 캠퍼스의 강의를 참고하여 작성하였습니다.